如何创建不破坏附加到模板的事件的 JavaScript 模板引擎?

How to create a JavaScript template engine that doesn't destroy events attached to the template?

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

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

我正在想办法创建一个具有完整 javascript 支持的模板引擎,但它 保留 在克隆之前附加到模板的任何事件。

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

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

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

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

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

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

您应该使用事件委托而不是过于复杂的模板,这样这个问题甚至不会出现。


是的,jQuery had .delegate – 它已被弃用,并已被 .on, which can do the same thing, see http://api.jquery.com/delegate/#entry-longdesc

取代