Knockout＆doT.js：如何使用事件進行模板化

Question

因此，我想用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一起工作的例子（ 從這個例子中拉出來 ）：

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/

有沒有人設法解決上下文問題？