JsRender:如何将变量传递到嵌套模板中

JsRender: How to pass variables into a nested template

本文关键字：嵌套 变量 JsRender      更新时间：2023-09-26

我想在网页的不同部分使用嵌套模板。对于不同的部分，我需要从嵌套模板中的数组中获取一个值。我不能使用 for 循环，因为每个部分在网站上都有不同的类和位置。是否可以将变量传递到嵌套模板中？以下代码简化了我试图实现的目标：

<script id="myBtnTmpl" type="text/x-jsrender">
    <button class="btn">        
        {{:myData.myArray[INDEX_VARIABLE].btnName}}
    </button>
</script>
//  Here I want to use INDEX_VARIABLE = 0
<div class="BigButton">
    {{if myData tmpl="myBtnTmpl"/}}
</div>
//  Here I want to use INDEX_VARIABLE = 1
<div class="MediumButton">
    {{if myData tmpl="myBtnTmpl"/}}
</div>
//  Here I want to use INDEX_VARIABLE = 2
<div class="SmallButton">
    {{if myData tmpl="myBtnTmpl"/}}
</div>

另一个问题：使用嵌套模板时，是否可以在没有if语法的情况下包含像这样的嵌套模板{{tmpl="myBtnTmpl"/}}？

谢谢！

是的，您可以在使用tmpl="myBtnTmpl"的标签上设置命名模板参数（无论是{{if}}标签还是{{for}}标签）：

<div class="BigButton">
    {{for myData ~arrIndex=0 tmpl="myBtnTmpl"/}}
</div>

然后，您可以像访问已注册的帮助程序一样访问模板参数 - 通过在名称后附加"~"。

<button class="btn">        
    {{:myData.myArray[~arrIndex].btnName}}
</button>

顺便说一下，您还可以使用 render 方法传递变量和帮助程序函数（除了数据）。我刚刚添加了一个新的示例演示来显示这一点。

因此，这意味着模板可以类似地"参数化"，无论您是从代码中呈现它们，还是像上面的嵌套模板一样以声明方式呈现它们。

相关文章：