2012-06-14 228 views
33

我正在尋找在視角中取消綁定功能。不幸的是,使用谷歌搜索和查看這裏提出的問題並沒有給我任何關於這個主題的有用信息。在視角中從視圖中取消綁定視圖模型

我會舉一個例子來說明需要什麼樣的功能。

可以說我有一個表格有幾個輸入。 另外我有一個視圖模型綁定到這種形式。 出於某種原因,作爲對用戶操作的反應,我需要從窗體中取消綁定我的視圖模型,即自動操作完成後,我希望所有可觀察對象停止對相應值的更改作出反應,反之亦然 - 對可觀察對象所做的任何更改shouldn不會影響投入的價值。

達到此目的的最佳方法是什麼?

回答

45

您可以使用ko.cleanNode刪除綁定。您可以將其應用於特定的DOM元素或更高級別的DOM容器(例如整個表單)。

查看http://jsfiddle.net/KRyXR/157/舉例。

+2

輝煌!謝謝! – ILya

+2

下一次寫getElementById而不是$(「#theid」)[0]它更好地使用JavaScript而不是所有的jQuery –

+18

對於我使用jQuery的項目,我通常樂意放棄1.5ms以避免輸入一個額外的15個字符。我想我會在有機會的時候繼續使用jQuery選擇器。 – Donamite

14

@Mark Robinson答案是正確的。

儘管如此,使用馬克答案我做了以下,你可能會發現有用的。

// get the DOM element 
    var element = $('div.searchRestults')[0]; 
    //call clean node, kind of unbind 
    ko.cleanNode(element); 
    //apply the binding again 
    ko.applyBindings(searchResultViewModel, element); 
+0

+1對於ko.cleanNode(元素) – lamarant

+0

我必須在手動禁用/啓用表單元素後才能使用此元素,以便恢復knockout的「啓用」綁定的自動性。 – casey

1

<html> 
 
    <head> 
 
     <script type="text/javascript" src="jquery-1.11.3.js"></script> 
 
     <script type="text/javascript" src="knockout-2.2.1.js"></script> 
 
     <script type="text/javascript" src="knockout-2.2.1.debug.js"></script> 
 
     <script type="text/javascript" src="clickHandler.js"></script> 
 
    </head> 
 
    <body> 
 
     <div class="modelBody"> 
 
      <div class = 'modelData'> 
 
       <span class="nameField" data-bind="text: name"></span> 
 
       <span class="idField" data-bind="text: id"></span> 
 
       <span class="lengthField" data-bind="text: length"></span> 
 
      </div> 
 
      <button type='button' class="modelData1" data-bind="click:showModelData.bind($data, 'model1')">show Model Data1</button> 
 
      <button type='button' class="modelData2" data-bind="click:showModelData.bind($data, 'model2')">show Model Data2</button> 
 
      <button type='button' class="modelData3" data-bind="click:showModelData.bind($data, 'model3')">show Model Data3</button> 
 
     </div> 
 
    </body> 
 
</html>

@馬克·羅賓遜給了完美的解決方案,我已經與單一的DOM元素,這單一的DOM元素的更新不同的視圖模型類似的問題。

每個視圖模型都有一個點擊事件,每次點擊發生時,每個視圖模型的點擊方法被調用,導致點擊事件期間不必要的代碼塊執行。

我遵循@Mark Robinson的方法來清理Node,然後再應用我的實際綁定,它確實運行良好。 謝謝羅賓。 我的示例代碼是這樣的。

function viewModel(name, id, length){ 
 
\t \t var self = this; 
 
\t \t self.name = name; 
 
\t \t self.id = id; 
 
\t \t self.length = length; 
 
\t } 
 
\t viewModel.prototype = { 
 
\t \t showModelData: function(data){ 
 
\t \t console.log('selected model is ' + data); 
 
\t \t if(data=='model1'){ 
 
\t \t \t ko.cleanNode(button1[0]); 
 
\t \t \t ko.applyBindings(viewModel1, button1[0]); 
 
\t \t \t console.log(viewModel1); 
 
\t \t } 
 
\t \t else if(data=='model2'){ 
 
\t \t ko.cleanNode(button1[0]); 
 
\t \t \t ko.applyBindings(viewModel3, button1[0]); 
 
\t \t \t console.log(viewModel2); 
 
\t \t } 
 
\t \t else if(data=='model3'){ 
 
\t \t ko.cleanNode(button1[0]); 
 
\t \t \t ko.applyBindings(viewModel3, button1[0]); 
 
\t \t \t console.log(viewModel3); 
 
\t \t } 
 
\t } 
 
\t } 
 
\t $(document).ready(function(){ 
 
\t \t button1 = $(".modelBody"); 
 
\t \t viewModel1 = new viewModel('TextField', '111', 32); 
 
\t \t viewModel2 = new viewModel('FloatField', '222', 64); 
 
\t \t viewModel3 = new viewModel('LongIntField', '333', 108); 
 
\t \t ko.applyBindings(viewModel1, button1[0]); 
 
\t }); 
 
\t