Question

我正在尝试使用全局变量访问数组中的对象。但是，似乎Handlebars不允许你这样做。有没有解决这个问题的方法？

这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <title>Handlebars.js example</title>
</head>
<body>
    <div id="placeholder">This will get replaced by handlebars.js</div>
    <script type="text/javascript" src="handlebars-v1.3.0.js"></script>
    <script id="myTemplate" type="text/x-handlebars-template">
        <table>
        <tbody>
        <tr><th>testing</th><td> <input type="text"><td></tr>
        {{!names[index] is not working}}
------>     {{#each names.[index]}}
        <tr><th> {{this}}</th><td><input type="text"><td></tr>
        {{/each}}
        </tbody>
        </table>
    </script>
    <script type="text/javascript">
        var source = document.getElementById("myTemplate").innerHTML;
        var template = Handlebars.compile(source);
        var index=0;
        var data = {
            names: [
            { name: "foo",id:'id',type:"type"},
            { name: "bar",id:'id' },
            { name: "baz",id:'id' }
            ]};
              document.getElementById("placeholder").innerHTML = template(data);
    </script>
</body>
</html>

我知道在这个例子中我不需要使用全局变量，但使用我需要的代码。请不要使用JQuery，因为我无法使用它。

编辑：这就是我在每个助手中尝试做的事情。我正在浏览一个对象的每个属性。为了做到这一点，我必须选择一个特定索引的对象，如名称。[0]例如。

Answer 1

句柄无法从模板内部访问全局变量。（顺便说一下，index不是全局的）。您可能必须在index

template()

{{#each names.[index]}}无法解析迭代(names[index])而是(names['index']，这不是您想要的。（{{#each names.[0]}}有效，因为0未转换为字符串）

解决方案：

我最喜欢的（example），直接在上下文中提供所需的names元素
```
template({selected:data.names[index]});
```

使用自定义帮助程序（example）

Handlebars.registerHelper('at', function(context, index, options) {
  if( options.fn ) return options.fn(context[index]);
  return context[index];
});

和

{{#at names index}}{{#each .}}
    <tr><th>{{@key}}</th><td><input type="text" value="{{.}}"><td></tr>
{{/each}}{{/at}}

最后，您还可以针对此问题on github.com/wycats/handlebars.js

如何使用Handlebars在数组索引中使用全局变量

1 个答案: