如何将事件绑定到 templating/data 绑定引擎生成的 html（否 Jquery）

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

如何将事件绑定到 templating/data 绑定引擎生成的 html（否 Jquery）

How to bind events to html generated by templating/data binding engines (No Jquery)

javascript

event-handling

dom-events

handlebars.js

template-engine