How to refer to Object of current iteration in 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>

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

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!

回答1:

I would suggest a different route. Knowing that you already have a reference to objArr, make a global or name-spaced variable pointing to it. For example: window.objArr = objArr;

Create your click handler that does whatever you wish: function processObject(key){ }

call that with your key inside your template:

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

Other alternatives: Customer Handler.

Other alternatives: If you can't create a reference to objArray, you might could store the properties of the object within data- attributes if you're using html5. processObject could then retrieve them.

回答2:

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 = [];

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

Which may render something like this:

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

来源：https://stackoverflow.com/questions/12711011/how-to-refer-to-object-of-current-iteration-in-handlebars

标签

handlebars.js