用于将值动态转换为 select 模板的 JSViews 语法

Question

在基于 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>

Answer 1

您不能在 {{...}} 标签的标记内嵌套 {:...} 标签。

我建议使用助手，而不是转换器：

{^{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>

用于将值动态转换为 select 模板的 JSViews 语法

JSViews syntax for converting value to select a template dynamically

jsviews