javascript-Knockout&doT.js：如何进行事件模板

因此,我想用doT替换Knockout模板引擎,以增强我的大型单页应用程序的性能.我已经能够将doT.js与剔除一起用作模板引擎,但是我遇到了一个大问题.

我习惯于使用Knockout的事件绑定来避免在ViewModels中附加事件处理程序.但是doT.js似乎没有提供此选项.我认为这样做的主要原因是doT.js仅编译了html字符串.

能够在我的视图中定义事件并仍然使用doT.js的最佳方法是什么？以前做过吗？

我的想法是,我将必须在data-attribute中定义事件,一旦doT.js完成编译,就将该html字符串放入一个分离的DOM元素中.然后,我将不得不执行类似.querySelectorAll的操作来查找数据事件属性并将其附加到父元素.

有人对此有更好的想法吗？

JSFiddle示例

这是Knockout.js和doT.js一起工作的示例(pulled from this example)：

http://jsfiddle.net/eeKe7/

解决方法:

不知道我是否理解正确,但是您已经在使用doT作为模板引擎.为什么不让淘汰赛处理不支持的东西呢？

<script id="ko-dot" type="text/html">
    {{~ it.items() :item }}
    <div>
        <span>{{=item.name()}}</span>, 
        <span>{{=item.age()}}</span><br>
        <ul>
            {{~ item.likes() :like }}
            <li data-bind="event: { click: itemClick }">{{= like}}</li>
            {{~}}
        </ul>
    </div>
    {{~}}
</script>

http://jsfiddle.net/sjroesink/ytdLj/

编辑

而且,如果您还想更改数据绑定内的JS表示法,则还可以使用doT：

<li data-bind="{{=it.event = { click: it.itemClick } }}">{{= like}}</li>

http://jsfiddle.net/sjroesink/ytdLj/2/

但我不建议这样做,因为它仅限制了定义绑定的灵活性.

标签：template-engine,knockout-js,dot-js,javascript
来源： https://codeday.me/bug/20191029/1961091.html