根据数据动态分配不同的模板 - 使用助手或自定义标签

Question

我在模板对象中渲染了一个 jsrender 模板。

var colorTmpl = {
     "color": jQuery.templates("<span>{{:~val}}</span>"),
}
var jsrendertmpl = {};
jQuery.extend(jsrendertmpl, colorTmpl);

如果我访问 jsrendertmpl.colorTmpl.render()，它将呈现颜色模板。如果我将此 tmpl 模板标签包含在其他模板中，例如

{colorArr: ["white", "blue", "black"]}

{{for colorArr tmpl="jsrendertmpl.colorTmpl"/}}

它不会将该子模板包含到父模板中。 所以我添加了一个自定义标记以将此子模板包含在对象中

includetmpl: function(tmplname){
            return Template.render(tmplVal, jObj);
},

如果我在父模板中包含子模板{{:~val}}无法识别

Parent Template with customised include tag

{{for colorArr itemVar='~val'}}
      {{includetmpl "color"}}
{{/for}}

Parent template without subtemplate (It works fine)

{{for colorArr itemVar='~val'}}
      <span>{{:~val}}</span>
{{/for}}

有什么方法可以访问该值。我使用了 {{setvar}} 和 {{:~getvar}} 来解决问题，但需要一个永久的解决方案。

提前致谢。

Answer 1

有几种方法可以实现该场景 - 即根据您传入的数据参数提供不同的模板。

例如，您可以将模板作为助手传入：

$.views.helpers("myTemplates", {
    color: $.templates("<span>{{:}}</span>"),
    colorVal: $.templates("<span>{{:~val}}</span>")
});

并像

那样使用它

{{for colorArr tmpl=~myTemplates.color/}}

或者如果 tmplVar 是您选择的模板："color"

{{for colorArr tmpl=~myTemplates[tmplVar]/}}

您也可以按照您的建议，通过以下任一方式创建自定义标签：

$.views.tags("includetmpl", {
    init: function(tagCtx) {
        this.template = myTemplates[tagCtx.props.template];
    }
});

或

$.views.tags("includetmpl2", {
    render: function(val) {
        return myTemplates[this.tagCtx.props.template].render(val, this.ctx);
    }
});

（请注意，在第二个版本中，我如何将上下文也传递给我的渲染函数，以便 ~val 可用...）

然后如下使用：

{{for colorArr}}{{includetmpl template="color"/}}{{/for}}

或

{{for colorArr itemVar="~val"}}{{includetmpl template="colorVal"/}}{{/for}}

我会更改您的问题的标题以使其更清楚。

Dynamically assigning different templates based on data - using helper or custom tag