Синтаксис JSViews для преобразования значения для динамического выбора шаблона - PullRequest
Новая
       13

Синтаксис JSViews для преобразования значения для динамического выбора шаблона

0 голосов
/ 18 сентября 2018

В приложении на основе jsviews у меня есть объект данных, который содержит атрибут типа (фактически тип сервера).

Я хотел бы преобразовать его и добавить суффикс для перехода к включению tmpl.

Допустим, у меня есть: 

$.views.converters({
    "serverSideTypeToLocalType": function(serverSideType) {
        switch(serverSideType) {
            case "server-side-type1":
                return "type1";
            case "server-side-type2":
                return "type2";
            case "server-side-type3":
                return "type3";
            default:
                throw "Invalid type";
        }
    }
});

У меня также есть шаблоны: 

<script type="text/x-jsrender" id"type1-edit">
template for editing type 1
</script>
<script type="text/x-jsrender" id"type1-view">
template for viewing type 1
</script><script type="text/x-jsrender" id"type2-edit">
template for editing type 2
</script>
<script type="text/x-jsrender" id"type2-view">
template for viewing type 2
</script><script type="text/x-jsrender" id"type3-edit">
template for editing type 3
</script>
<script type="text/x-jsrender" id"type3-view">
template for viewing type 3
</script>

Мой объект данных: 

var data = { MyObjects : [
{
    "ServerSideType": "server-side-type1",
    "IsEditing" : true
},{
    "ServerSideType": "server-side-type2",
    "IsEditing" : false
}] };

Как создать основной шаблон, который динамически включает правильный шаблон на основе свойств ServerSideType и IsEditing?

Я пытался: 

<div>
{^{for MyObjects}}


        {^{include ^tmpl=({serverSideTypeToLocalType:ServerSideType}+ "-" + IsEditing ? "edit":"view")/}}

{{/for}}

</div>

, но это приводит к странной ошибке Cannot read property 'bd' of undefined.

Вот воспроизводимый образец: 

(function($) {
  $(function() {
    $.views.converters({
      "serverSideTypeToLocalType": function(serverSideType) {
        switch (serverSideType) {
          case "server-side-type1":
            return "type1";
          case "server-side-type2":
            return "type2";
          case "server-side-type3":
            return "type3";
          default:
            throw "Invalid type";
        }
      }
    });


    var data = {
      MyObjects: [{
        "ServerSideType": "server-side-type1",
        "IsEditing": true
      }, {
        "ServerSideType": "server-side-type2",
        "IsEditing": false
      }]
    };


    var tmpl = $.templates("#main");
    tmpl.link("#container", data);
  });

})(jQuery);
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jsviews/0.9.90/jsviews.min.js"></script>
<script type="text/x-jsrender" id="main">
  <div>
    {^{for MyObjects}} 
    <p>Object n° {^{:#index +1}}</p>
    
   {^{include ^tmpl=({serverSideTypeToLocalType:ServerSideType}+ "-" + IsEditing ? "edit":"view")/}}       

    {{/for}}

  </div>
</script>
<script type="text/x-jsrender" id="type1-edit">
  <div>
    template for editing type 1
  </div>
</script>
<script type="text/x-jsrender" id="type1-view">
  <div>
    template for viewing type 1
  </div>
</script>
<script type="text/x-jsrender" id="type2-edit">
  <div>
    template for editing type 2
  </div>
</script>
<script type="text/x-jsrender" id="type2-view">
  <div>
    template for viewing type 2
  </div>
</script>
<script type="text/x-jsrender" id="type3-edit">
  <div>
    template for editing type 3
  </div>
</script>
<script type="text/x-jsrender" id="type3-view">
  <div>
    template for viewing type 3
  </div>
</script>

<div id="container">Loading ...</div>

1 Ответ

0 голосов
/ 19 сентября 2018

Вы не можете вложить тег {:...} в разметку тега {{...}}.

Я бы предложил использовать вспомогательный, а не конвертер: 

{^{include ^tmpl="#" + ~serverToLocal(ServerSideType) + "-" + (IsEditing ? "edit":"view")/}}

Вы также можете использовать связанный с данными элемент: 

<span data-link='{include ^tmpl="#" + ~serverToLocal(ServerSideType)+ "-" + (IsEditing ? "edit" : "view")}'></span>


(function($) {
  $(function() {
    function serverToLocal(serverSideType) {
      switch (serverSideType) {
        case "server-side-type1":
          return "type1";
        case "server-side-type2":
          return "type2";
        case "server-side-type3":
          return "type3";
        default:
          throw "Invalid type";
      }
    }

    var data = {
      MyObjects: [{
        "ServerSideType": "server-side-type1",
        "IsEditing": true
      }, {
        "ServerSideType": "server-side-type2",
        "IsEditing": false
      }]
    };

    var tmpl = $.templates("#main");
    tmpl.link("#container", data, {serverToLocal: serverToLocal});
  });

})(jQuery);
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jsviews/0.9.90/jsviews.min.js"></script>

<script type="text/x-jsrender" id="main">
  <div>
{^{for MyObjects}} 
  <p>Object n° {^{:#index +1}}</p>
  <input data-link="ServerSideType" />
  <input data-link="IsEditing" type="checkbox"/>
  {^{include ^tmpl="#" + ~serverToLocal(ServerSideType) + "-" + (IsEditing ? "edit":"view")/}}
{{/for}}
  </div>

  Two:
  <div>
{^{for MyObjects}} 
  <p>Object n° {^{:#index +1}}</p>
  <span data-link='{include ^tmpl="#" + ~serverToLocal(ServerSideType)+ "-" + (IsEditing ? "edit" : "view")}'></span>
{{/for}}
  </div>
</script>

<script type="text/x-jsrender" id="type1-edit">
  <div>
template for editing type 1
  </div>
</script>
<script type="text/x-jsrender" id="type1-view">
  <div>
template for viewing type 1
  </div>
</script>
<script type="text/x-jsrender" id="type2-edit">
  <div>
template for editing type 2
  </div>
</script>
<script type="text/x-jsrender" id="type2-view">
  <div>
template for viewing type 2
  </div>
</script>
<script type="text/x-jsrender" id="type3-edit">
  <div>
template for editing type 3
  </div>
</script>
<script type="text/x-jsrender" id="type3-view">
  <div>
template for viewing type 3
  </div>
</script>

<div id="container">Loading ...</div>
...