javascript - Handlebars 在 #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 上下文中 key 给出的值，但我什么也没得到。相反，如果我仅使用 {{ 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

您需要创建一个帮助程序才能使用基于变量的动态 key (running example) 访问对象:

模板:

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