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可以检索它们。

Answer 2

我使用Handlebars助手和一系列上下文对象来完成此操作。

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

** (exit) an exception was raised:
    ** (File.Error) could not read file stats "uploads/images/1-user_upload_3.png": no such file or directory

当我们在模板中放置“ {{obj}}”时，我们需要注册一个Handlebars帮助器函数，该函数将当前上下文对象存储在数组中。辅助函数返回数组中对象的索引，该索引将被呈现：

var ContextObjects = [];

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

// 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}}

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

2 个答案: