handlebars.js - 如何在 Handlebars 中引用当前迭代的对象

Question

有没有办法在 Handlebars 中获取当前迭代的对象？

代码:

<script id="HandleBarTemplate1" type="text/x-handlebars-template">
{{#each objArr}}
<img src="{{objField1}}"/>
<strong>Name:</strong> {{objField2}}
<input type="button" onclick="processObject({{.}});"/>
{{/each}}
</script>

我提到过 processObject({{.}})那是不正确的。这就是我需要更换/解决方案的地方。希望你能明白我想说的话。objArr的内容可能看起来像

var objArr = [{objField1:"smith.jpg",objField2:"Smith"},{objField1:"jane.jpg",objField2:"Jane"},...]

模板编译代码为:

var source = document.getElementById("HandleBarTemplate1").innerHTML;
var compiledTemplate = Handlebars.compile(source);
var html = compiledTemplate({objArr:objArr});

如果我能得到对象的引用，那么处理数据就很容易了。而不是将字段传递给函数并搜索整个数组以获取所需的对象然后对其进行处理。

我更喜欢解决方案 没有自定义块助手/自定义表达式助手 但如果不存在，我宁愿去自定义块助手。欢迎任何不搜索整个数组的解决方案!

Answer 1

我会建议不同的路线。
知道您已经拥有对 objArr 的引用，创建一个指向它的全局变量或命名空间变量。
例如:window.objArr = objArr;

创建可以执行任何操作的点击处理程序:
函数处理对象(键){
}

使用模板中的 key 调用它:

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

   {{#each objArr}}

      <img src="{{objField1}}"/>

      <strong>Name:</strong> {{objField2}}

      <input type="button" onclick="processObject({{objField2}});"/>

   {{/each}}

</script>

其他选择:
客户处理程序。

其他选择:
如果您无法创建对 objArray 的引用，则可以在使用 html5 的情况下将对象的属性存储在 data-attributes 中。然后 processObject 可以检索它们。