Question

使用 Handlebars.js 等模板引擎或 Rivets.js 等数据绑定引擎时，会根据更改中的内容生成或更新视图中的内容你的模特。这意味着如果模型发生变化，内容本身将丢失在初始生成时绑定到它的任何事件侦听器。

我可以进入框架本身并自定义它以在生成时将特定的侦听器添加到特定类型的内容，但这在可维护性和规模等方面似乎是一个可怕的想法。

我可以将一个事件监听器绑定到模型对象，这样当它被更改时，新的监听器被绑定到结果视图，但这似乎会增加很多开销。

或者我认为最干净的方法只是将事件监听器作为html模板本身的属性，调用全局可访问的函数。

<script id="foo-template" type="text/x-handlebars-template">
    <ul id="NumsSymbs">

        {{#each this}}
            <li onclick="globalFunction()"><a href="#">{{this}}</a></li>
        {{/each}}
    </ul>

</script>

这样，无论何时重新渲染模板，或者重新渲染该列表中的单个项目（如果使用铆钉），侦听器将自动处于渲染的html中。

我的问题是，但是如果有更好的方法可以做到这一点，也许是一个标准？像Angular.js或Ember.js这样的MVC框架如何处理这类事情？

Answer 1

你也可以用普通的javascript进行委托，这不是那么难，只需要额外的工作

document.getElementById('NumsSymbs').addEventListener('click', function(e) {
    var target = e.target, // the clicked element that the event bubbled from
        search = 'LI';     // element it needs to be inside

    do {
        if (target.nodeName.toUpperCase() === search) { // if match found
            globalFunction();
        }
    } while (target = target.parentNode); // iterate up through parents

}, false);

如何将事件绑定到由模板/数据绑定引擎生成的html（No Jquery）

1 个答案: