Templates 在HandlebarsJS模板中使用两个数据源

我有一个把手模板，它使用一个数据源，其中包含按字母顺序排列的名称列表。现在我需要修改这个模板，这样我就可以在模板顶部为每个字母显示一个按钮列表。然后，当用户单击按钮时，它会过滤模板中的名称列表，但仍会在顶部显示每个字母的所有按钮

是否可以将这两种形式的数据传递给一个模板，或者在加载后是否可以过滤加载到模板中的数据

---

Stephen

我将创建一个对象，该对象具有字母表中每个字母的属性。这些键的值将是包含每个名称的数组。从那里，您可以嵌套{{each}}块来循环遍历它们，而无需创建任何其他帮助程序

HTML:

Javascript:

var names = ['alfa', 'beta', 'bob', 'cat', 'man', 'dog', 'etc'];
var context = {};

(function(names) {
    var first = "";

    for (var i = 0, j = names.length; i < j; i++) {
        first = names[i][0];

        if (!context.hasOwnProperty(first)) {
            context[first] = [];   
        }

        context[first].push(names[i]);
    }

})(names);

var template = Handlebars.compile($('#hbs').html());
var html = template(context);
$('body').append(html);

这是一个工作的概念。祝你好运：

var names = ['alfa', 'beta', 'bob', 'cat', 'man', 'dog', 'etc'];
var context = {};

(function(names) {
    var first = "";

    for (var i = 0, j = names.length; i < j; i++) {
        first = names[i][0];

        if (!context.hasOwnProperty(first)) {
            context[first] = [];   
        }

        context[first].push(names[i]);
    }

})(names);

var template = Handlebars.compile($('#hbs').html());
var html = template(context);
$('body').append(html);