尝试使用jsrender在for循环中的数组上运行函数

Question

试图将非常复杂的 jQuery 模板代码转换为 jsRender。我在旧代码中有每个循环：

<script id = "imagesTemplate" type="text/x-jquery-tmpl">
    {{each(i,imgUrl) twoAcross_filterOutMainImages(OfferGroup.Images)}}
        <img src="{{= imgUrl}}" />
    {{/each}}
</script>

<script id = "largeTemplate" type="text/x-jquery-tmpl">
    {{tmpl "#imagesTemplate"}}
</script>

<div id="LARGE"  class="mainContent"></div>
<script>
     currentOffer = offerGroups[0].Groups[0];
     $( "#LARGE" ).html( $( "#largeTemplate" ).render( currentOffer ) ); 
</script>

我已将其编辑为如下所示：

{{for ~filterOutMainImages(Images) tmpl="#imagesTemplate"/}}

<div id="LARGE"  class="mainContent"></div>
<script>
     currentOffer = offerGroups[0].Groups[0];
     $( "#LARGE" ).html( $( "#largeTemplate" ).render( currentOffer ) ); 
</script>

但它不起作用。如果我将其更改为：

<script id = "imagesTemplate" type="text/x-jquery-tmpl">    
        <img src="{{= imgUrl}}" />
</script>

<script id = "largeTemplate" type="text/x-jquery-tmpl">
    {{for Images tmpl="#imagesTemplate"/}}
</script>

<div id="LARGE"  class="mainContent"></div>
<script>
     currentOffer = offerGroups[0].Groups[0];
      $( "#LARGE" ).html( $( "#largeTemplate" ).render( currentOffer ) ); 
</script>

它绘制要显示的图像，但该函数不在图像数组上运行。但是，如果我离开 Images 数组而不被包裹在一个函数中，并将 for 循环移动到模板内部，它就会中断。

我将如何转换这种情况？

Answer 1

JsRender 和 jQuery 模板之间的一个重要区别是 JsRender 不允许您直接在模板标记中访问全局函数或变量。

这是一种设计选择，与安全问题和关注点分离有关。但与 Mustache 等“无逻辑”模板语言不同，JsRender 为模板内的逻辑提供了非常强大和灵活的支持——同时仍然防止代码和标记的随机混合。

包含逻辑的一种方法是将其封装在模板之外的辅助函数中，但在这种情况下，您需要注册辅助函数，无论是全局还是特定模板，或者通过渲染调用将其传递给选项对象。

有关文档，请参阅 www.jsviews.com/#helpers 和 www.jsviews.com/#samples/jsr/helpers。 （www.jsviews.com 网站上还有许多其他示例显示了辅助函数的使用）

所以你可以这样做

function filterOutMainImages(images) { ... }

// Register helper
$.views.helpers({
    filterImages: filterOutMainImages 
});    

var html = $("#largeTemplate").render(currentOffer);

$("#LARGE").html(html);

或者

function filterOutMainImages(images) { ... }

var html = $("#largeTemplate").render(
    currentOffer,
    {filterImages: filterOutMainImages} // Pass in helper
);

$("#LARGE").html(html);

假设您的 filterOutMainImages() 函数返回一个过滤后的数组，并且您的助手如上注册或传入，那么以下模板应该可以工作：

<script id = "imagesTemplate" type="text/x-jsrender">    
    <img src="{{>imgUrl}}" />
</script>

<script id = "largeTemplate" type="text/x-jsrender">
    {{for ~filterImages(Images) tmpl="#imagesTemplate"/}}
</script>