我一直在评估许多不同的客户端JS模板引擎(doT,鹦鹉,dust.js,微型模板,下划线等)。它们都以类似的方式工作,使用某种类型的标记来表示数据,并且具有将纯JS嵌入模板(包括循环,if / then等)的功能。但是,它们都通过将模板本身转换为字符串来工作。 ,然后插入javascript,以插值变量,执行循环等。
当发生这种转换时,附加到模板中原始对象(即jQuery在document.ready上创建)的所有事件处理程序当然都会丢失。要将这些处理程序添加回结果HTML中,则必须在每次渲染模板后返回并重新应用任何此类事件处理程序。
我正在尝试一种创建具有完整javascript支持的模板引擎的方法,但该方法会在克隆之前保留附加到模板的所有事件。
设想一个方案,其中模板用于项目列表。每个项目都包含在该项目上执行特定任务的按钮(即,编辑,删除,重命名,复制,您便会得到想法)。
为了使代码整洁并易于维护,将Click事件应用于document.ready()模板HTML中的这些按钮是有意义的。然后,每次为新列表项克隆模板时,事件也会被克隆。
但是,使用当前的模板库,所有事件在克隆阶段都会丢失,这需要在列表每次更新时将所有事件应用于克隆对象。如果这是实时数据,或者用户正在将新项目添加到列表中,那么跟踪事件并确保每次添加项目时都正确附加事件似乎变得非常麻烦。
我知道jQuery具有克隆事件的clone()函数,这对于基本模板非常有用,但是当您尝试将任意javascript合并到模板中时,这变得不切实际。
我试图避免依赖html元素属性的模板来配置循环,决策等,因为模板代码变得非常难看。需要一个干净的模板,该模板具有用于数据替换的简单标签,用于重复元素的简单JS for循环以及对源数据的简单引用。
有人对此有想法吗?
谢谢!
最佳答案
不要使用过于繁琐的模板,而应该使用事件委托,这样就不会出现此问题。
是的,jQuery已使用.delegate
–已弃用,并已由.on
代替,后者可以执行相同的操作,请参见http://api.jquery.com/delegate/#entry-longdesc