Kendo-Knockout: закрытие оконных перерывов

Question

Я использую библиотеку кендо-нокаутом RPNiemeyer. У меня есть кнопка, которая onclick создает объект javascript, связывает div с этим объектом и открывает всплывающее окно. Когда я закрываю окно с помощью кнопки x, которая находится в верхнем правом углу (я не импортировал изображения, и он не визуализирован правильно в скрипке.), Привязки сломаны, и кнопка не открывает окно снова. Вот мой 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.openPopUp = function() { 
        self.isOpen(true);      
       }; 
     ProductionStatesList.prototype.close = function() { 
      self.isOpen(false); 
     } 
}; 
    var elementIsBound = function (elementId) { 
       return !!ko.dataFor(document.getElementById(elementId)); 
      }; 

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

     productionStatesList.openPopUp(); 
    } 

Вот код в jsfiddle: http://jsfiddle.net/5Zkyg/40/

Шаги для воспроизведения:

1.Click кнопку. Открывается всплывающее окно.

2.Закройте окно с верхнего правого изображения (кнопка x не отображается, поскольку изображения не импортируются).

Пожалуйста, объясните причину, по которой это не работает, и любое решение будет принята с благодарностью. Благодаря!

Answer 1

Основная проблема заключается в том, что последующие вызовы openPopup создают новый экземпляр ProductionStatesList и вызывают на нем openPopup, а элемент привязан к исходному экземпляру.

Одним из решений было бы создать экземпляр за пределами функции, как: http://jsfiddle.net/rniemeyer/bZF9k/

В противном случае, если у вас есть массив ProductionStatesList инстанции и хотите управлять все это с Knockout, то вы, вероятно, хотите создать a selectedProductionStatesList наблюдайте и используйте привязку with вокруг области внутри окна, так что она отскочит каждый раз.