如何在车把中引用当前迭代的对象 [英] How to refer to Object of current iteration in Handlebars

问题描述

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

Is there any way to get the object of the current iteration in Handlebars?
code:

<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的内容可能类似于

I've mentioned processObject({{.}}) That is incorrect. That's where I need a replacement/Solution.Hope you get what I'm tryin' to say.
The contents of objArr might look like

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

模板编译代码为:

Template compilation code is:

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

如果我可以获取对Object的引用，那么处理数据非常容易.而不是将字段传递给函数并搜索整个数组以获取所需的对象然后进行处理.
我更喜欢没有自定义块帮助程序/自定义表达式帮助程序的解决方案，但如果不存在，我宁愿选择自定义块帮助程序.欢迎在不搜索整个阵列的情况下使用任何解决方案！

If I could get the reference to the Object, then It's so easy to process the data. Rather than passing a field to the function and searching through entire array to get the required object and then process it.
I Prefer a solution without a custom block helper/custom expression helper but if none exists, I'd rather go for a custom block helper. Any solution without searching through the entire array is welcome!

推荐答案

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

I do this with a Handlebars helper and an array of context objects.

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

Somewhere we have an array of context objects, which will store a reference to each context object we need to reference:

var ContextObjects = [];

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

We need to register a Handlebars helper function that stores the current context object in the array for us when we place "{{obj}}" in the template. The helper returns the index of the object in the array, which is what gets rendered:

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

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

Next we need a function to retrieve the object from the index on the element:

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

我们在模板中将它们绑在一起，如下所示:

We tie them together in the template something like this:

{{#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>
...

这篇关于如何在车把中引用当前迭代的对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！