javascript - 如何使用 Handlebars 和 YUI 设置 onclick？

Question

我正在使用 YUI 中的 Handlebars 模块为我的应用程序做一些模板，我编写了这个模板方法:

var source = '<ol>{{#items}}<li style="width:400px;">' +
    '{{{name}}} done <button class="btn btn-primary">remove # {{@index }}</button> </li>{{/items}}</ol>';

var compileList = function() {
        var html = Y.Handlebars.render(source, {
            items: itemArray
        });

        Y.one('#my-list').setContent(html);
}

我希望 li 中的每个按钮在单击时都具有以下功能:

var removeList = function(index) {
    itemArray.splice(index);
    compileList();
};

这可以通过 Handlebars 和 YUI 实现吗？

Answer 1

我建议使用事件委托(delegate) ( http://yuilibrary.com/yui/docs/event/delegation.html )，遵循以下原则:

Y.one('#my-list').delegate('click', function (ev) {
    // do stuff here
}, 'button');

如果在 use() 调用中还没有“node-event-delegate”，则需要它。

“在这里做一些事情”将是你的函数的主体，除了你需要计算出你需要的索引。

事件委托(delegate)更好，因为无论您有多少个 li，您都只需添加一个事件监听器。事件监听器位于目标元素(li)之上，并等待事件将 DOM 向上冒泡到它。如果这是有道理的 - 如果没有的话，YUI 网站上有更好的解释。