Question

我正在使用JsRender构建我的HTML页面，我希望能够实现以下目标。

<script id="qtype" type="text/x-jsrender">
   <li class="question-container" data-type="{{:Question.Type}}">
       {{include tmpl="#inner-template"/}}
   </li>
</script>

我希望能够做的是将内部模板包含在正在呈现的模型中的某个属性上。例如，如果我的模型有一个名为'Type'的属性，则无效的synax解释了该要求（希望如此）

{{include tmpl=:"#" + Question.Type}}

或者，或许，使用'帮助'方法：

{{include tmpl=~GetTemplateName(Question.Type)}}

我已经尝试将模板名称添加到模型中，但我无法将其用于include语句：

{{include tmpl=templateName/}}

有人能告诉我这是否可能，或者是另一种建议？

感谢。

Answer 1

我一直在使用最新版本，这种方法很好用：

对于内联模板：

// given an inline template named 'myTmpl'
{{for myModel.someProperty tmpl="#myTmpl" /}}

对于已编译的模板：

// given a compiles template named 'myTmpl'
{{for myModel.someProperty tmpl="myTmpl" /}}

我认为代码中缺少的是引号。无论是编译模板还是内联模板，您仍然需要它们。我不确定是否仍支持“include”关键字，但使用{{for /}}可以正常工作，无论传入的模型是否为数组。问题是，jsRender会将所有视为一个数组传递给它，但如果它只包含一个值，则只渲染一次。

另外，请确保正确编译模板。我使用了一个实用程序函数来预先编译所有这些：

function () {
    return $.when(
        $.get(getPath("templateOne")),
        $.get(getPath("templateTwo"))
    )
    .done(function (one, two) {
        $.templates({
            tmplOne: one[0],
            tmplTwo: one[0]
        });
    });
}

这将创建两个名为“tmplOne”和“tmplTwo”的编译模板，您可以在其他模板中使用这些模板。

但要注意的是，编译需要时间。如果你在编译之前尝试使用模板，jsRender还不会知道它并且有一些真的奇怪的行为。因此返回一个Promise以确保我在编译之前不使用模板：

compileTemplates().done(function() {
    // do my work with compile templates here.
}).fail(function() {  /* handle failure */ });

Answer 2

构建更新27似乎可以解决我的问题。 {{include}}语句已被修改，以便我现在可以将模板名称定义为模型的一部分，然后使用以下脚本。

<script id="qtype" type="text/x-jsrender">
    <li class="question-container" data-type="{{:Question.Type}}">
        {{include tmpl="#templateId" /}}
    </li>
</script>

可以在https://github.com/BorisMoore/jsrender/issues/155

找到更完整的讨论

在JsRender中包含模板

2 个答案: