敲除& doT.js:如何对事件进行模板化

Question

因此，我想用doT取代doT模板引擎，以增强我的大型单页面应用程序的性能。我已经能够让doT.js将淘汰机作为模板引擎使用，但我遇到了一个大问题。

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

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

我的想法是，我必须用data-属性定义我的事件，一旦doT.js完成编译，将该html字符串抛到一个独立的DOM元素中。然后，我必须执行类似于.querySelectorAll的操作，以找到data-事件属性并将这些属性附加到父元素。

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

JSFiddle示例

下面是Knockout.js和doT.js协同工作(从这个例子中提取)的一个例子：

http://jsfiddle.net/eeKe7/

Answer 1

不确定我是否正确理解，但您已经使用doT作为模板引擎；为什么不让剔除处理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/

不过，我不建议这样做，因为它只限制了定义绑定的灵活性。

Answer 2

您可以通过给点函数代码而不是对函数的引用来使它工作。但我不推荐它，而且它很丑！

<button data-bind="click: {{!item.someFunc}}">Click Me...</button>

示例：http://jsfiddle.net/ytdLj/8/

有人设法解决了上下文问题吗？