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

Trying to run a function on an array in a, for loop, using jsrender

本文关键字：数组 函数 运行 循环 for jsrender      更新时间：2023-09-26

尝试将非常复杂的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 循环移动到模板内部，它就会中断。

如何转换此方案？

JsRender 和 jQuery Templates 的一个重要区别是 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>
相关文章：