Question

我的问题是如何访问模板中的“样式”和“内容”参数？我通过创建另一个来修改帮助程序（基础与官方网站相同），但我无法访问它们。

模板

<div id=emoticons class="change_profile">
    {{#each all_avatars.images_male}}//this is an array['m1', 'm2, ...]'
        <img src="domain.com/{{this.content}}.png" style="{{this.style}}">
    {{/each}}
</div>

帮助

<script>
     Handlebars.registerHelper('each', function(icons_list) {
         var icons=[];
         var single={
             content:'',
             style:''
         }      
         for(var i=0, j=icons_list.length; i<j; i++) {
                    single.content = icons_list[i];
                    single.style='<something>';             
                    icons[i]=single; 
          }     
          return icons;
        });
</script>

结果

<div id=emoticons class="change_profile">

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]                             

</div>

Answer 1

基于Handlebars.js文档（参见Simple Iterators），你的助手应该返回一个直接渲染到文档中的字符串。当您返回一个数组（icons）时，它将转换为字符串并按原样呈现。

以下助手声明应该会给出更好的结果，特别是考虑到调用options.fn(single)应该让Handlebars.js将您img标签的模板转换为正确的图像。

<script>
    Handlebars.registerHelper('each', function(icons_list, options) {
        var icons="";
        var single={ content:'', style:'' };

        for(var i=0, j=icons_list.length; i<j; i++) {
            single.content = icons_list[i];
            single.style='<something>';             
            icons += options.fn(single); 
        }       
        return icons;
    });
</script>

话虽如此，将这种逻辑放入名为each的助手中并不是一个好主意，这很快就会变得混乱。我宁愿使用与文档中声明的each相同的<div id=emoticons class="change_profile"> {{#each all_avatars.images_male}} <img src="domain.com/{{this}}.png" style="<something>"> {{/each}} </div>并替换模板：

{{1}}

帮助器修改handlebarsJS中每个行为的行为

1 个答案: