Рули достигают пары ключ-значение в общем объекте контекста в другом объекте в #each

Question

У меня есть шаблон, используемый Handlebars и мой контекст, как показано ниже:

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

Все хорошо, пока здесь. Но мне нужно сделать что-то вроде:

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

Я ожидаю собрать значение, заданное ключом в контексте xyz.words, но ничего не получаю. Вместо этого, если я использую только {{ this }} он работает нормально и возвращает значение из abc.

Что мне здесь не хватает?

Редактировать:

Кстати, я пытался использовать помощники, и вот что я сделал:

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

Вам нужно создать помощника для доступа к объекту с помощью динамического ключа на основе переменных (пример выполнения):

Шаблон:

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

Код:

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