如何在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});

如果我能获得对象的引用，那么处理数据就非常容易。而不是将字段传递给函数，并在整个数组中搜索所需的对象，然后再进行处理。
我更喜欢一个没有自定义块助手/自定义表达式助手的解决方案，但如果没有这样的解决方案，我宁愿选择自定义块助手。任何不需要搜索整个数组的解决方案都受到欢迎！

- Nokia808Freak

---

完全同意这一点 - 类似“数据上下文”的东西会非常有帮助。 - b_levitt

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-属性中。然后，processObject可以检索它们。

- Perry Tew

Answer 2

我使用Handlebars助手和上下文对象数组来实现这一点。

在某个地方，我们有一个上下文对象数组，它将存储对我们需要引用的每个上下文对象的引用：

var ContextObjects = [];

我们需要注册一个 Handlebars 帮助函数，当我们将 "{{obj}}" 放入模板中时，该函数会为我们在数组中存储当前上下文对象。帮助函数返回对象在数组中的索引，这就是被呈现的内容。

// Must be function and not lambda to preserve the correct 'this' 
Handlebars.registerHelper("obj", function () 
{
    var contextObject = this; // the current context object
    var index = ContextObjects.indexOf(contextObject);
    if (index < 0)
    {
        index = ContextObjects.length;
        ContextObjects[index] = contextObject;
    }
    return index;
});

接下来，我们需要一个函数来从元素的索引中检索对象：

// Get the context object for the current event (e.g. click or context).
function GetContextObject(event)
{
    var $e = $(event.currentTarget);
    var index = $e.attr("data-obj");
    return ContextObjects[index];
}

我们在模板中将它们绑定在一起，类似于这样：

{{#each Items}}
<div data-obj="{{obj}}" onclick="DoSomething(GetContextObject(event));">...</div>
{{/each}}

这可能会呈现出类似于这样的东西：

<div data-obj="0" onclick="DoSomething(GetContextObject(event));">...</div>
<div data-obj="1" onclick="DoSomething(GetContextObject(event));">...</div>
<div data-obj="2" onclick="DoSomething(GetContextObject(event));">...</div>
...

- Etherman