Knockout & doT.js：如何使用事件进行模板化答案

【问题标题】：Knockout & doT.js: How to have templating with eventsKnockout & doT.js：如何使用事件进行模板化
【发布时间】：2017-01-20 17:00:23
【问题描述】：

所以我想用doT 替换Knockout 模板引擎，以增强我的大型单页应用程序的性能。我已经能够让 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/

【问题讨论】：

您愿意提供一个 JS fiddle 来显示您当前与 doT 的集成状态吗？

标签： javascript knockout.js template-engine dot.js

【解决方案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/

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

【讨论】：

天哪，你太棒了！我不知道你可以传回淘汰赛！不完全是我想要的，因为我根本不想使用淘汰赛绑定，但这非常有帮助。如果我没有得到不使用淘汰赛绑定的答案，我一定会接受！
我刚刚注意到您的代码有问题。 itemClick 应该在 likes 的数组中，但不是。它位于视图模型的根目录中。我将如何改变淘汰赛的范围？
您可以通过$root访问根范围：event: { click: $root.itemClick }
问题是如果它不在根目录中怎么办。请参阅此示例：jsfiddle.net/ytdLj/3

【解决方案2】：

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

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

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

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

【讨论】：