5

有没有办法在 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});

如果我可以得到对象的引用，那么处理数据就很容易了。而不是将字段传递给函数并搜索整个数组以获取所需的对象然后处理它。
我更喜欢没有自定义块助手/自定义表达式助手的解决方案，但如果不存在，我宁愿选择自定义块助手。欢迎任何不搜索整个数组的解决方案！

4

2 回答 2

0

我会建议一条不同的路线。知道您已经拥有对 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 可以检索它们。

于 2013-06-28T19:51:55.643 回答
0

我使用 Handlebars 助手和一组上下文对象来执行此操作。

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

var ContextObjects = [];

当我们在模板中放置“{{obj}}”时，我们需要注册一个 Handlebars 辅助函数，该函数将当前上下文对象存储在数组中。助手返回数组中对象的索引，这是渲染的内容：

// 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>
...
于 2019-08-01T16:23:07.243 回答