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

时间:2012-07-04 08:17:31

标签: javascript jquery jsrender

我想在网页的不同部分使用嵌套模板。对于不同的部分,我需要从嵌套模板中的数组中获取值。我不能使用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>

另一个问题:当使用嵌套模板时,可以包含嵌套模板,如{{tmpl =“myBtnTmpl”/}},而不使用if语法吗?

谢谢!

1 个答案:

答案 0 :(得分:6)

是的,您可以在使用tmpl="myBtnTmpl"的标记上设置命名模板参数(无论是{{if}}标记还是{{for}}标记:

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

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

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

顺便提一下,您还可以使用render方法传递变量和辅助函数(以及数据)。我刚刚添加了一个新的sample demo来表明这一点。

所以这意味着无论是从代码渲染模板还是在上面的嵌套模板中声明地模板,模板都可以“参数化”。