劍道淘汰賽：綁定改變

我會用以前問問題的代碼小的改動綁定元素的值時，但情況是不同的突破：劍道淘汰賽：綁定改變

Kendo-Knockout: Closing window breaks bindings

HTML：

<button onclick="openPopUp()">OpenPopUp</button> 

<div id="productionStates" class="hidden"> 
    <div data-bind="kendoWindow: { isOpen: isOpen, title:'States', center:true, width: 600, height: 150, modal: true, resizable: false, actions: ['Maximize', 'Close'] }" > 
     <fieldset> 
      <legend>Change state:</legend> 
      <table> 
       <tr data-bind="foreach: productionStates"> 
        <td><button class="k-button" data-bind="value: ProductionState, text: ProductionState" /></td> 
       </tr> 
      </table> 
     </fieldset> 
    </div> 

</div>

的javascript：

var ProductionStatesList = function() { 
    var self = this; 

    ProductionStatesList.prototype.productionStates = 
     ko.observableArray([ { ProductionState: ko.observable("Pending") } ]); 

     ProductionStatesList.prototype.openPopUp = function() { 
      self.isOpen(true); 
     };  

     ProductionStatesList.prototype.isOpen = ko.observable(false); 

     ProductionStatesList.prototype.close = function() { 
      self.isOpen(false); 
     } 
}; 
    var elementIsBound = function (elementId) { 
       return !!ko.dataFor(document.getElementById(elementId)); 
      }; 


    var myProductionStatesList = ko.observable(); 
    var openPopUp = function(){ 
     myProductionStatesList(new ProductionStatesList()); 
     if (!elementIsBound("productionStates")){ 
      ko.applyBindings(myProductionStatesList, document.getElementById("productionStates")); 
     } 

     myProductionStatesList().openPopUp(); 
    }

myProductionStatesList是可觀察的。點擊彈出的按鈕打開，我正在實例化ProductionStatesList視圖模型並將其值分配給myProductionStatesList。第一次點擊按鈕時，每個按鈕都可以正常工作。當您關閉彈出窗口並再次單擊該按鈕時，綁定被破壞並且沒有任何反應。我期待每按一下按鈕，生產狀態清單的新實例將被反彈，因爲myProductionStatesList是可觀察的。我錯過了什麼？

的jsfiddle：

http://jsfiddle.net/bZF9k/15/

來源

2012-12-17 Mdb

我認爲，在這種情況下，最好的辦法是去一個地步，你不需要調用ko.applyBindings多次。

一個不錯的選擇是創建一個可觀察的模型，該模型包含當前的ProductionStatesList和openPopup函數。然後，在編輯器周圍使用with綁定。

視圖模型可能只是看起來像：

var viewModel = { 
    myProductionStatesList: ko.observable(), 
    openPopup: function() { 
     var newList = new ProductionStatesList(); 
     this.myProductionStatesList(newList); 
     newList.openPopup(); 
    } 
};

這裏有一個例子：http://jsfiddle.net/rniemeyer/wBCdK/

來源

2012-12-17 13:44:35

劍道淘汰賽：綁定改變

回答

相關問題