如何在Handlebars中引用当前迭代的Object

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;

创建执行您希望执行的任何操作的点击处理程序： function processObject(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 可以检索它们。