Kendo-Knockout: Fermeture de la fenêtre de fermeture de bindings

Question

J'utilise la bibliothèque kendo-knockout de RPNiemeyer. J'ai un bouton qui onclick instancie un objet javascript, lie un div à cet objet et ouvre une fenêtre pop-up. Lorsque je ferme la fenêtre à partir du bouton x qui est dans le coin supérieur droit (je n'ai pas importé les images et il n'est pas visualisé correctement dans le violon), les liaisons sont brisées et le bouton n'ouvre pas la fenêtre à nouveau. Voici mon 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(); 
    } 

Voici le code jsFiddle: http://jsfiddle.net/5Zkyg/40/

Étapes pour reproduire:

1.Click le bouton. La fenêtre contextuelle est ouverte. 2.Fermez la fenêtre à partir de l'image en haut à droite (le bouton x n'est pas visualisé car les images ne sont pas importées).

S'il vous plaît expliquer la raison pour laquelle cela ne fonctionne pas et toute solution sera grandement appréciée. Merci!

Answer 1

Le problème principal est que les appels suivants à openPopup créent une nouvelle instance de ProductionStatesList et appellent openPopup, alors que les éléments sont liés à l'instance d'origine.

Une solution serait de créer votre instance en dehors de la fonction comme: http://jsfiddle.net/rniemeyer/bZF9k/

Sinon, si vous avez un tableau de ProductionStatesList instance et à gérer tout ça avec knock-out, alors vous voudrez probablement créer un selectedProductionStatesList observable et utiliser la liaison with autour de la zone à l'intérieur de la fenêtre, de sorte qu'il rebondit à chaque fois.