javascript - 如何创建一个不会破坏附加到模板的事件的 JavaScript 模板引擎？

Question

我一直在评估很多不同的客户端 JS 模板引擎(doT、parrot、dust.js、microtemplated、underscore 等)。它们的工作原理都类似，使用某种类型的标签来表示数据，并且有些能够将纯 JS 嵌入到模板中，包括循环、if/then 等。但是，它们都是通过将模板本身转换为字符串来工作的，然后进入 javascript，以便插入变量、执行循环等。

当这种转换发生时，附加到模板内原始对象的任何事件处理程序(即由 jQuery 在 document.ready 创建的)当然会丢失。要将这些处理程序添加回生成的 HTML，则需要在每次模板呈现后返回并重新应用任何此类事件处理程序。

我正在尝试想出一种方法来创建一个具有完整 JavaScript 支持的模板引擎，但它保留在克隆之前附加到模板的任何事件。

想象一个场景，其中模板用于项目列表。每个项目都包含执行该项目特定任务的按钮(即编辑、删除、重命名、复制，您懂的)。

为了使代码简洁且易于维护，将 Click 事件应用于 document.ready() 模板 HTML 中的这些按钮是有意义的。然后，每次为新列表项克隆模板时，事件也会被克隆。

但是，使用当前的模板库，所有事件都会在克隆阶段丢失，这需要在每次更新列表时将所有事件应用于克隆对象。如果这是实时数据，或者用户正在向列表中添加新项目，那么跟踪事件并确保每次添加项目时都正确附加它们似乎会变得非常复杂。

我知道 jQuery 有一个用于克隆事件的 clone() 函数，这对于基本模板非常有用，但是当您尝试将任意 JavaScript 合并到模板中时，这变得不切实际。

我试图避免依赖 html 元素属性来配置循环、决策等的模板，因为模板代码变得非常难看。我们需要一个干净的模板，其中包含用于数据替换的简单标签、用于重复元素的简单 JS for 循环以及对源数据的简单引用。

有人知道如何做到这一点吗？

Answer 1

您应该使用事件委托(delegate)，而不是过于复杂的模板，这样这个问题就不会出现。

<小时/>

是的，jQuery 有 .delegate – 它已被弃用，并已被 .on 取代。 ，它可以做同样的事情，请参阅 http://api.jquery.com/delegate/#entry-longdesc