javascript - JSRender - 如何有条件地渲染子模板

Question

我正在尝试学习 JSRender。是否可以根据条件渲染子模板？例如，如果#index = 1或2，则渲染模板A，如果3或4，则渲染模板B？

Answer 1

这是正确的语法 - 以及下面的一些文档链接。

<script id="tmplFeaturePanel1" type="text/x-jsrender">
    {{for List}}
        {{if #index == 1 || #index == 2}}
            {{include tmpl="#test1or2"/}}
        {{else #index === 3 || #index === 4 }}
            {{include tmpl="#test3or4"/}}
        {{else}}
            {{include tmpl="#testOther"/}}
        {{/if}}
    {{/for}}
</script>

或者一个更紧凑但工作原理相同的语法是:

<script id="tmplFeaturePanel2" type="text/x-jsrender">
    {{for List}}
        {{if #index == 1 || #index == 2 tmpl="#test1or2"}}
        {{else #index === 3 || #index === 4 tmpl="#test3or4"/}}
        {{else tmpl="#testOther"/}}
        {{/if}}
    {{/for}}
</script>

在这两种情况下，引用的模板可能是:

<script id="test1or2" type="text/x-jsrender">
    1or2 {{:name}}
</script>

<script id="test3or4" type="text/x-jsrender">
    3or4 {{:name}}
</script>

<script id="testOther" type="text/x-jsrender">
    Other: {{:name}}
</script>

查看

• http://www.jsviews.com/#samples/jsr/composition/tmpl
• http://www.jsviews.com/#iftag
• http://www.jsviews.com/#includetag

顺便说一句，请注意 {{elseif ...}} 或 {{else if ...}} 不是正确的语法。事实上，{{else someExpression}} 用作 elseif。 {{else}} 用作 else。