如何清除/刪除Knockout.js中的可觀察綁定？

Question

我正在將功能構建到用戶可以多次執行的網頁上。通過用戶的操作，使用ko.applyBindings（）創建對象/模型並將其應用於HTML。

數據綁定HTML通過jQuery模板創建。

到目前爲止這麼好。

當我重複此步驟通過創建一個第二對象/模型並調用ko.applyBindings（）我遇到兩個問題：

1. 的標記示出了以前的對象/模型以及新對象/模型。
2. 與對象/模型中的其中一個屬性發生javascript錯誤，雖然它仍然呈現在標記中。

爲了解決這個問題，在第一次傳遞之後，我調用jQuery的.empty（）來移除包含所有數據綁定屬性的模板HTML，以便它不再位於DOM中。當用戶啓動第二遍的進程時，數據綁定的HTML被重新添加到DOM。但是正如我所說的，當HTML被重新添加到DOM並重新綁定到新的對象/模型時，它仍然包含來自第一個對象/模型的數據，並且我仍然得到JS錯誤在第一階段不會發生。

結論似乎是Knockout堅持這些綁定的屬性，即使標記從DOM中刪除。

所以我在找的是從Knockout中移除這些綁定屬性的方法;告訴淘汰賽，不再有可觀察的模型。有沒有辦法做到這一點？

EDIT

的基本過程是，用戶上傳的文件;服務器然後用JSON對象響應，則數據綁定HTML被添加到DOM，則JSON對象模型被綁定到使用

mn.AccountCreationModel = new AccountViewModel(jsonData.Account); 
ko.applyBindings(mn.AccountCreationModel); 

這個HTML一旦用戶已經在模型上進行了一些選擇，所述同一個對象被回傳到服務器，數據綁定HTML從那麼DOM取出，然後我有以下JS

mn.AccountCreationModel = null; 

當用戶希望這樣做一次，重複所有這些步驟。

恐怕代碼太'參與'做一個jsFiddle演示。

Answer 1

您是否嘗試過在您的DOM元素上調用knockout的clean節點方法來處理內存綁定對象？

var element = $('#elementId')[0]; 
ko.cleanNode(element); 

然後在新的視圖模型上再次對該元素應用敲除綁定將更新您的視圖綁定。

Answer 2

對於我正在處理的項目，我編寫了一個簡單的ko.unapplyBindings函數，該函數接受jQuery節點和remove布爾值。它首先將所有的jQuery事件解除綁定爲ko.cleanNode方法並沒有考慮到這一點。我已經測試過內存泄漏，它似乎工作得很好。

ko.unapplyBindings = function ($node, remove) { 
    // unbind events 
    $node.find("*").each(function() { 
     $(this).unbind(); 
    }); 

    // Remove KO subscriptions and references 
    if (remove) { 
     ko.removeNode($node[0]); 
    } else { 
     ko.cleanNode($node[0]); 
    } 
}; 

Answer 3

我要叫ko.applyBinding每次搜索點擊按鈕，過濾數據是從服務器返回，在這種情況下以下不使用ko.cleanNode爲我工作。

我經歷過，如果我們用模板替換foreach，那麼它應該在集合/ observableArray的情況下工作正常。

您可能會發現這種情況很有用。

<ul data-bind="template: { name: 'template', foreach: Events }"></ul> 

<script id="template" type="text/html"> 
    <li><span data-bind="text: Name"></span></li> 
</script> 

Answer 4

我發現，如果視圖模型包含了很多的div綁定清除ko.applyBindings(new someModelView);最好的方法是使用：ko.cleanNode($("body")[0]);這允許你動態調用一個新的ko.applyBindings(new someModelView2);沒有以前的視圖模型的擔心仍然綁定。

Answer 5

你可以嘗試使用的是與結合淘汰賽提供： http://knockoutjs.com/documentation/with-binding.html 的想法是使用一次申請綁定，並且只要你的數據發生變化，只需更新你的模型。

假設您有一個頂級視圖模型storeViewModel，您的購物車由cartViewModel， 和該購物車中的物品列表 - 比如說cartItemsViewModel。

您會將頂層模型 - storeViewModel綁定到整個頁面。然後，您可以分離頁面中負責購物車或購物車項目的部分。

讓我們假設cartItemsViewModel具有以下結構：

var actualCartItemsModel = { CartItems: [ 
    { ItemName: "FirstItem", Price: 12 }, 
    { ItemName: "SecondItem", Price: 10 } 
] } 

的cartItemsViewModel可以在開始時是空的。

的步驟是這樣的：

1. 在HTML定義綁定。分開cartItemsViewModel綁定。

    
       
       <div data-bind="with: cartItemsViewModel"> 
        <div data-bind="foreach: CartItems"> 
        <span data-bind="text: ItemName"></span> 
        <span data-bind="text: Price"></span> 
        </div> 
       </div> 
    
   

2. 商店模型來自您的服務器（或以任何其他方式創建）。

   var storeViewModel = ko.mapping.fromJS(modelFromServer)

3. 你的頂層視圖模型定義空模型。然後可以用 實際數據更新該模型的結構。

    
       
       storeViewModel.cartItemsViewModel = ko.observable(); 
       storeViewModel.cartViewModel = ko.observable(); 
    
   

4. 綁定頂層視圖模型。

   ko.applyBindings(storeViewModel);

5. 當cartItemsViewModel對象可用，則分配給之前定義的佔位符。

   storeViewModel.cartItemsViewModel(actualCartItemsModel);

如果你想清除車項目： storeViewModel.cartItemsViewModel(null);

淘汰賽會照顧HTML的 - 即當模型不爲空和div的內容就會出現（與「具有約束力」的那個）將消失。

Answer 6

我認爲保持綁定整個過程可能會更好，只需更新與其關聯的數據即可。我遇到了這個問題，並發現只使用在我保存數據的陣列上調用.resetAll()方法是最有效的方法。

基本上你可以用它包含數據通過視圖模型被渲染一些全局變量開始：

var myLiveData = ko.observableArray(); 

我花了一段時間來實現我不能只是做myLiveData一個正常的陣列 - 在ko.oberservableArray部分很重要。

然後，你可以繼續做任何你想要的東西myLiveData。例如，做一個$.getJSON電話：

$.getJSON("http://foo.bar/data.json?callback=?", function(data) { 
    myLiveData.removeAll(); 
    /* parse the JSON data however you want, get it into myLiveData, as below */ 
    myLiveData.push(data[0].foo); 
    myLiveData.push(data[4].bar); 
}); 

一旦你做到了這一點，你可以繼續使用應用綁定您的視圖模型和往常一樣：

function MyViewModel() { 
    var self = this; 
    self.myData = myLiveData; 
}; 
ko.applyBindings(new MyViewModel()); 

然後在HTML只使用myData作爲你通常會。

這樣，你可以用myLiveData從任何函數中去掉。例如，如果您想每隔幾秒更新一次，只需在功能中包裝$.getJSON行並在其上調用setInterval即可。只要您記得保留myLiveData.removeAll();行，就永遠不需要刪除綁定。

除非您的數據真的很大，否則用戶甚至無法注意到重置數組之間的時間，然後重新添加最新數據。

Answer 7

除了使用KO的內部函數和處理JQuery的全局事件處理程序刪除外，更好的辦法是使用with或template綁定。當你這樣做時，ko重​​新創建DOM的那部分，並自動清理。這也是推薦的方式，請看這裏：https://stackoverflow.com/a/15069509/207661。

Answer 8

我最近有內存泄漏問題，ko.cleanNode(element);不會爲我做 - ko.removeNode(element);沒有。 Javascript + Knockout.js memory leak - How to make sure object is being destroyed?

Answer 9

你有沒有想過這一點：

try { 
    ko.applyBindings(PersonListViewModel); 
} 
catch (err) { 
    console.log(err.message); 
} 

我這一點，因爲在淘汰賽上來了，我發現這個代碼

var alreadyBound = ko.utils.domData.get(node, boundElementDomDataKey); 
    if (!sourceBindings) { 
     if (alreadyBound) { 
      throw Error("You cannot apply bindings multiple times to the same element."); 
     } 
     ko.utils.domData.set(node, boundElementDomDataKey, true); 
    } 

所以對我來說它不是一個真正的問題，它已經綁定了，其錯誤沒有被發現並處理...