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

正在尝试将非常复杂的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>

{{每个（i，imgUrl）两个跨_filteroutmain映像（OfferGroup.Images）}
{{/每个}}
{{tmpl{imagesTemplate}
currentOffer=offerGroups[0]。组[0]；
$（“#大”）.html（$（“#大模板”）.render（currentOffer））；

我将其编辑为如下所示：

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

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

{{for~filteroutmainmimages（Images）tmpl=“#imagesTemplate”/}
currentOffer=offerGroups[0]。组[0]；
$（“#大”）.html（$（“#大模板”）.render（currentOffer））；

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

{{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>

{{对于图像tmpl=“#imagesTemplate”/}
currentOffer=offerGroups[0]。组[0]；
$（“#大”）.html（$（“#大模板”）.render（currentOffer））；

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

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

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

---

我将如何转换此场景

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

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

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

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

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

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

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

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

<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>

所以在你的情况下你可以

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

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

function filterOutMainImages(images) { ... }

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

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

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

或

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

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

假设您的filterOutMainImages（）函数返回一个已过滤的数组，并且您的助手已按上述方式注册或传入，那么以下模板应该可以工作：

{{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-jsrender">    
    <img src="{{>imgUrl}}" />
</script>

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

imgUrl}}”/>
{{for~filterImages（Images）tmpl=“#imagesTemplate”/}

如何声明助手函数：filterOutMainImages？是的，显示小提琴会很好…应该是{{:imgUrl}.上面的第二个版本缺少模板的包装器…我在使用fiddle界面设置时遇到问题，所以我在这里发布了一个测试页面：Boris非常感谢！！实际上Boris如果你看我的测试页面，它似乎仍然不起作用。这是我写数组的方式吗？实际上看起来可能是我写数组的方式我正在尝试调用循环中的每个项。似乎没有“handleeach as…”我在#LARGE div的顶部写了一行注释，表明数组正在进入for循环。我刚刚使用了#view.data，就好像它是for循环中的数组[I]或是each循环中的数组[I]。因此在上面的示例中{>imgUrl}应该是{{：#view.data}如果你的函数返回一个字符串数组，那么它将是{：#data}，这是{：#view.data}的缩写。或者你可以使用{>#data}、{{attr:#data}或{url:#data}进行编码-看。考虑到您以前的版本，我假设您返回了一个具有imgUrl属性的对象数组。哇，您的库非常复杂！很高兴有这些选项，做得很好。再次感谢。