Question

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

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

斯蒂芬

Answer 1

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

HTML：

<script id="hbs">
    {{#each this}}
        {{@key}}
        <ul>
            {{#each this}}
                <li>{{this}}</li>
            {{/each}}
        </ul>
    {{/each}}
</script>

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

这是一个有效的JSFiddle概念。祝你好运：）

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

1 个答案: