我正在使用 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 实现吗?
最佳答案
我建议使用事件委托(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 网站上有更好的解释。
关于javascript - 如何使用 Handlebars 和 YUI 设置 onclick?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26358547/