Question

我有一个Handlebar模板（实际上是一个Mustache模板）

<script id="thumbnail" type="text/x-handlebars-template">

    {{#available}}
    <div class="thumbnail" style="left: {{#coordx}}{{@index}}{{/coordx}};">
        Test Index is {{@index}}
    </div>      
    {{/available}}          

</script>

这是我正在使用的数据上下文。

 var generateThumbnails = {
        "available": [
            "Ruby",
            "Javascript",
            "Python",
            "Erlang",
            "more"
        ],

        coordx : function () {
              return someValue;
        }
    };

动态地，我正在使用函数left css margin as coordx生成coordx。

在模板中，我想传递用于生成左边距（不起作用）的{{@index}}。就像在calling function with arguments in mustache javascript

中解释的那样

我应该如何传递索引以便获得保证金值？

Answer 1

如果您尝试在函数中使用索引，则需要执行：

<script id="thumbnail" type="text/x-handlebars-template">

{{#available}}
<div class="thumbnail" style="left: {{coordx @index}}">
    Test Index is {{@index}}
</div>      
{{/available}}

在你的功能中你会去：

coordx : function (index) {
     var item = index;

     if(item == 0){
         return('15px');
     } else {
         return('30px');
     };
}

这将产生：

<div class="thumbnail" style="left: 15px;">
    Test Index is 0
</div>

<div class="thumbnail" style="left: 30px;">
    Test Index is 1
</div>

Answer 2

Handlebars的语法无效

如果您正在使用Handlebars（很难从帖子中说出来），要迭代数组，请使用{{#each}}帮助程序。

<强>无效：

{{#available}}
    ...   
{{/available}}

<强>有效：

{{#each available}}
    ...   
{{/each}}

注册把手助手

要将@index传递给函数并在返回之前执行某些操作，请在JS文件中注册自定义表达式助手，而不是在JSON模型中传递函数。在Handlebars中，JSON上下文中不需要函数。

<强>助手：

// Expression Helper
// Return index multiplied by 10 appended with 'px' unit.
Handlebars.registerHelper('coordx', function (index) {
    return (index * 10) + 'px';
});

最终模板：

{{#each available}}
    <div class="thumbnail" style="left: {{coordx @index}};">
        Index {{@index}}: {{this}}
    </div>
{{/each}}

这是一个有效的JS小提琴：http://jsfiddle.net/gfullam/L5jrq3dp/

如何使用把手js传递{{@index}}作为参数值

2 个答案:

Handlebars的语法无效

注册把手助手