Question

因此，我希望将Knockout模板引擎替换为doT，以提高我的大型单页应用的性能。我已经能够让doT.js使用淘汰赛作为模板引擎，但我遇到了一个大问题。

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

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

我的想法是我必须在data-属性中定义我的事件，并且一旦doT.js完成编译，将该html字符串抛出到分离的DOM元素中。然后，我必须执行.querySelectorAll之类的操作来查找data-事件属性并将其附加到父元素。

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

JSFiddle示例

以下是Knockout.js和doT.js一起工作的示例（pulled from this example）：

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/

修改

如果你还想在data-bind中更改JS表示法，你也可以使用doT：

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

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

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

Answer 2

你可以通过给dot函数代码而不是函数的引用来使它工作。但我不推荐它和它的丑陋！

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

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

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

淘汰赛doT.js：如何使用事件进行模板化

2 个答案: