0

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

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

我想做的是将内部模板包含基于正在渲染的模型中的某些属性。例如，如果我的模型有一个名为“类型”的属性，下面虽然无效的语法，但解释了要求（希望如此）

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

或者，也许，使用“帮助”方法：

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

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

{{include tmpl=templateName/}}

谁能告诉我这是否可能，或者可能有替代建议？

谢谢。

4

2 回答 2

2

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

对于内联模板：

// 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 */ });
于 2013-03-20T12:58:04.877 回答
0

构建更新 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找到

于 2013-03-15T15:14:03.847 回答