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

Question

我希望在网页的不同部分使用嵌套模板。在不同的部分中，我需要从嵌套模板内的数组中获取值。我无法使用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 语法？

谢谢！

- doorman

---

对于第二个问题，{{for myData tmpl="#myBtnTmpl"/}} 但是完全不明白你原来的问题是什么。 - Willy

无论如何，根据标题，我认为您可以在https://github.com/BorisMoore/jsrender/blob/master/demos/step-by-step/06_template-composition.html上参考。 - Willy

Answer 1

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

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

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

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

顺便提一下，您可以在渲染方法中传递变量和帮助函数（除数据外）。我刚刚添加了一个新的示例演示。

这意味着模板可以类似地被“参数化”，无论您是从代码还是像上面的嵌套模板声明性地渲染它们。

- BorisMoore

---

嗨Boris，感谢您的快速回复。我按照您的示例，在标签上放置了~arrIndex=0。但是，当我尝试在模板内访问该变量时，模板似乎找不到它。我正在使用最新的提交计数19。您成功了吗？ - doorman

感谢您仍然支持jsRender，您应该在官方页面上展示一下。 - Boban Stojanovski

@boban984：您的意思是展示使用JsRender或JsViews的网站链接吗？ - BorisMoore

@BorisMoore 是的，我觉得 jsRender 没有得到应有的赞赏。我在它还处于 alpha 阶段时就开始使用了，在 Angular 或 Ember 出现之前，Backbone 和 Knockout 只是开始流行。但是 jsRender 对我们的需求来说性能更高，所以我们选择了它。我现在仍在使用它......请查看 Solaborate - Boban Stojanovski

@BobanStojanovski：谢谢 - 听到这个消息很好。当然，我知道有很多人在使用JsRender或JsViews做很酷的事情并创建很酷的网站，但是很难找到他们，或者建立这样的网站列表。此外，许多人都是强大的内部网站，而不是公共面向的网站。这就是为什么到目前为止我还没有尝试建立一个“画廊”的原因...（如果您对此有进一步想法，我很乐意通过电子邮件交流 - [e-mail]） - BorisMoore

你说得对，我能想到的唯一办法就是在网站上放置一个表单或其他东西，让人们可以向你发送他们应用程序的URL。 - Boban Stojanovski