把手在#each中不同对象中的一般上下文对象中达到键值对

Question

I have a template used by Handlebars and my context like below:

var context = {
    abc: ["a","b","c","d"],
    xyz: {
         words: {
             a: 1,
             b: 2,
             c: 3,
             d: 4
         }
    }
}
var template = Handlebars.compile(tpl);
var output = template(context);

Everything is fine till here. But i need to do something like:

{{#each abc }}
 <li><a data-toggle="tab" href="#{{ ../xyz.words[this] }}"> {{ this }} </a></li>
{{/each }}

I expect to gather a value given by key in xyz.words context but I get nothing. Instead, if I use only {{ this }} it works fine and return a value from abc.

What am I missing here?

Edit:

By the way I tried to use Helpers and here is what I did:

Handlebars.registerHelper("whatis", function(key){
       return  xyz.words[key];
    });

{{#each abc }}
 <li><a data-toggle="tab" href="#{{ whatis this] }}"> {{ this }} </a></li>
{{/each }}

Answer 1

You need to create a helper in order to access the object with a dynamic, variable-based key (running example) :

Template:

{{#each abc }}
 <li> 
     {{#getObjectValue ../xyz.words key=this}}
     <a data-toggle="tab" href="#{{this}}">
     {{/getObjectValue}}
     {{ this }} </a>
 </li>
{{/each }}

Code:

Handlebars.registerHelper('getObjectValue', function(object, options) {
    return options.fn(object[options.hash.key]);
});
var template = Handlebars.compile($("#template").html());
$("#target").html(template(context));