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为模板内的逻辑提供了非常强大而灵活的支持 - 同时仍然防止代码和标记的随机混合。

包含逻辑的一种方法是在辅助函数中将其封装在模板外部，但在这种情况下，您需要注册辅助函数，全局或者特定模板，或者使用render调用将其传递给options对象。

有关文档，请参阅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>

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

1 个答案: