使用knockout.js更新jquery UI對話框的內容

我正在使用knockout.js和jquery的最新版本。我試圖創建一個jquery對話框，只要特定的ko.observable具有值，就可以打開和關閉。我基於我在這個jsfiddle，http://jsfiddle.net/rniemeyer/WpnTU/，我在這個Knockout.js論壇，https://groups.google.com/d/msg/knockoutjs/XIaQMNHjy7Q/BpfDU5inKVQJ發現的代碼的實現。使用knockout.js更新jquery UI對話框的內容

但是，這種方法只適用於如果我包括現在棄用jquery-tmpl.js插件（版本1.0.0pre）。我已將問題分解爲兩個jsfiddles，一個工作版本（http://jsfiddle.net/LhEnV/29/）和一個損壞的版本（http://jsfiddle.net/gygh3/1/）。唯一的區別是jquery-tmpl.js不包含在第二個版本中。

問題的根源在於，當我第一次加載頁面時，對話框及其內容依賴的可觀察性未設置。因此，模板綁定的屬性不可用，這會導致錯誤。在淘汰賽前包括jquery-tmpl可以解決問題，所以我假設淘汰賽模板引擎會在jquery-tmpl可用時更改它的行爲。但是，我不想依賴於已棄用的插件。

有沒有更好的方法來綁定jQuery UI對話框，它的內容到ViewModel？

來源

2012-07-17 Phil G

你試過顯式訂閱observables改變，所以你把你的代碼顯示/隱藏對話框裏面的「訂閱」功能？ http://knockoutjs.com/documentation/observables.html 請參閱「顯式訂閱觀察值」部分。 – 2012-07-17 20:43:11

不。我想保留我的DOM操作代碼在自定義綁定，因爲這似乎是淘汰賽的最佳做法。 Serjio的回答正是我所錯過的。 – 2012-07-17 21:20:17

只要改變這一點：

<script id="newDialogTmpl" type="text/html"> 
    Add <span data-bind="text: displayName"></span>? 
</script>

要的是：

<script id="newDialogTmpl" type="text/html"> 
    <!-- ko if: $data --> 
    Add <span data-bind="text: displayName"></span>? 
    <!-- /ko --> 
</script>

在第一時間你newThing道具等於null所以它的觸發REFFERENCE錯誤。你應該檢查是否$data不爲空然後渲染模板，如果爲空 - 什麼都不做

來源

2012-07-17 21:12:31 Serjio

啊，就是這樣！很簡單。你的解決方案在我的jsfiddle中工作，更重要的是它解決了我的實際代碼中的問題。感謝您的快速響應！ – 2012-07-17 21:19:06

另一個提示是，你實際上可以把你的「if」作爲模板綁定的一個選項，例如：'template：{template：{name：'newDialogTmpl'，'if'：newThing，data：newThing}'，那麼你可以讓它脫離你的模板。 jQuery模板引擎比原生引擎更容忍數據爲空。我把'if'放在引號中，因爲最後一次檢查舊IE版本並不喜歡KO在該級別解析的'if'關鍵字。 – 2012-07-17 21:27:01

謝謝，這更好！ – 2012-07-17 21:38:18

使用knockout.js更新jquery UI對話框的內容

回答

相關問題