自定義綁定，綁定＆init - knockout.js

Question

我們使用基於多視圖模型的SPA的敲除來處理可見的視圖，我們已經包裝了divs，我們在with bindings中綁定了「子」視圖模型。

我們看到的問題是，當視圖可見性切換時，它內部的自定義綁定將被執行，每次都會執行init &更新。

當我們根據這個jqdialog binding進行綁定並且在每個init上創建一個新對話框並將其添加到我們的DOM中時，這會對我們造成問題，但是我們沒有簡單的方法知道它應該被刪除。

或多或少，這是一個問題，如果我們應該重新安排我們arcitecture的這一部分，或者如果我們的綁定中缺少某些東西。

簡單的觀點：

<div id="view"> 
    <button data-bind="click: on">On</button> 
    <button data-bind="click: off">Off</button> 

    <div data-bind="with: visible"> 
    <span data-bind="foo: ''">foo</span> 
    visible 
    </div> 

</div>​​​​​​​​​​ 

JS：

ko.bindingHandlers.foo= { 
    init: function() { 
    alert("init"); 
    }, 
    update: function() { 
    alert("update"); 
    } 
} 


var vm =(function() { 
    var self = this; 
    self.visible = ko.observable(false); 

    self.on = function() { self.visible(true); }; 
    self.off= function() {self.visible(false); }; 

})(); 

ko.applyBindings(vm, document.getElementById("view")); 

小fiddle簡略地表示我們的錯誤。

Answer 1

您的問題是您沒有切換可見性。當您使用with時，您每次都將相同的元素刪除並重新插入到DOM中。這當然會導致綁定被重新創建，並且會再次觸發該功能。

如果您只想隱藏/顯示，請使用可見綁定。

所以，如果你這樣做：

<div data-bind="visible: visible"> 
    <span data-bind="foo: ''">foo</span> 
    visible 
</div> 

你會看到你結合時初始化頁面加載並不會再次爲你顯示/隱藏初始化。見here。