【发布时间】：2015-01-25 00:33:43
【问题描述】：
我一直在评估许多不同的客户端 JS 模板引擎（doT、parrot、dust.js、微模板、下划线等）。它们的工作方式都相似，使用某种类型的标签来表示数据，并且有一些能够将纯 JS 嵌入到模板中，包括循环、if/then 等。但是，它们都通过将模板本身转换为字符串来工作，然后进入 javascript，以插入变量、执行循环等。
当发生这种转换时，附加到模板中原始对象的任何事件处理程序（即由 jQuery 在 document.ready 创建的）当然会丢失。要将这些处理程序添加回生成的 HTML，则需要在每次模板呈现后返回并重新应用任何此类事件处理程序。
我正在想办法创建一个完全支持 javascript 的模板引擎，但在克隆之前保留任何附加到模板的事件。
想象一个场景，其中模板用于项目列表。每个项目都包含执行该项目特定任务的按钮（即编辑、删除、重命名、复制，你懂的）。
为了使代码简洁且易于维护，将 Click 事件应用于模板 HTML 中的这些按钮是有意义的，地址为 document.ready()。然后每次为新列表项克隆模板时，也会克隆事件。
但是，对于当前的模板库，所有事件在克隆阶段都会丢失，这需要将所有事件应用到克隆对象每次更新列表。如果这是实时数据，或者如果用户正在向列表中添加新项目，那么跟踪事件并确保每次添加项目时正确附加它们似乎会变得非常复杂。
我知道 jQuery 有一个克隆事件的clone() 函数，这对于基本模板非常有用，但是当您尝试将任意 JavaScript 合并到模板中时，这变得不切实际。
我试图避免依赖 html 元素属性来配置循环、决策等的模板，因为模板代码变得非常难看。需要一个干净的模板，其中包含用于数据替换的简单标记、用于重复元素的简单 JS for 循环以及对源数据的简单引用。
有人对如何做到这一点有想法吗？
【问题讨论】：
-
不要过度复杂的模板，你应该看看事件委托，这样这个问题就不会出现了……
-
是的，通过事件委托和在视图中管理事件让事情变得简单。检查在使用模板（Ember/Angular 等）的不同 mvc 设置中如何管理事件。模板毕竟是模板。
-
@CBroe 你完全正确。感谢您为我指明正确的方向！我太专注于确保每个元素都附加了它的事件。事件委托让一切变得更简单，jQuery 支持它 (api.jquery.com/delegate)。如果你愿意，把它放在一个答案中，我会给你你应得的功劳！谢谢！
-
@sabithpocker 你是对的 - 事件委托就是答案。谢谢！
-
@RyanGriggs 您还可以检查可扩展库中事件处理程序的管理程度。粗心的非托管处理程序可能会在大型 SPA 中导致不必要的内存丢失。
标签： javascript dom-events template-engine