title: Kendo-Knockout: Window does not close correctly
body: <p>I am using RPNiemeyer kendo-knockout library. I have a grid. When the user clicks on a row of grid a pop up window is showed. When You close the window and open it again in the same way the application freezes with the closing animation. I tried as much as I can to reproduce this scenario in fiddle. 
  In fiddle when You close the pop up window and click on the row again nothing happens and the browser is reloaded. I strongly believe that something similar is happening in my application.</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div data-viewId="languageList" &gt;
      &lt;div id="languageList" data-bind="with: viewModel"&gt;
          &lt;div id="languageListGrid" data-bind="kendoGrid: { data: languageViewModels, columns: [ 
                  { 
                      template: '&lt;a href=\'\' data-bind=\'click: function() { onLanguageSelected(&amp;quot;#=Language#&amp;quot;) }\'&gt;#=Language#&lt;/a&gt;', 
                      field: 'Language', 
                      title: 'Language',
                      width: 50
                  }
  
                  ], 
              scrollable: false, sortable: true, pageable: false }" style="height: 380px"&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div data-viewid="languageDetails"&gt;
      &lt;div id="languageDetails" data-bind="with: viewModel" class="hidden"&gt;
          &lt;form id="languageDetailsForm" action="" style="font-family: Trebuchet MS, Verdana, Helvetica, Sans-Serif;"&gt;
          &lt;div data-bind="kendoWindow: {isOpen: isOpen, title:'Language', width: 400, height: 200, modal: true }" &gt;
              test
              &lt;button id="cancelLanguage" class="k-button" data-bind="click: cancelLanguage"&gt;Cancel&lt;/button&gt;
          &lt;/div&gt;
         &lt;/form&gt;
      &lt;/div&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p>javascript:</p>
  
  <pre><code>$(function () {
  
      var elementIsBoundNew = function (element) {
          return !!ko.dataFor(element);
      }
  
      var applyBindings = function (viewModel, elementId) {
          var element = $('div[data-viewId="' + elementId + '"]')[0];
          if (!elementIsBoundNew(element)) {
              var parentViewModel = { viewModel: viewModel };
              ko.applyBindings(parentViewModel, element);
          }
      };
  
      var FranchiseDetailsViewModel = function () {
          var 
              self = this,
              initialize = function () {
                  self.languagesInfoViewModel(new LanguageListViewModel(self));
                  applyBindings(self.languagesInfoViewModel, "languageList");
              };
  
          FranchiseDetailsViewModel.prototype.languagesInfoViewModel = ko.observable();
          initialize();
      };
  
      var LanguageListViewModel = function (franchise) {
          var 
              self = this,
              initialize = function () {
                  var languageViewModel = new LanguageDetailsViewModel(franchise);
                  self.languageViewModels.push(languageViewModel);
              };
          LanguageListViewModel.prototype.languageViewModels = ko.observableArray([]);
          LanguageListViewModel.prototype.selectedLanguageViewModel = ko.observable();
  
          LanguageListViewModel.prototype.onLanguageSelected = function (selectedLanguage) {
    // when you uncomment this line everyting works fine
    //var language = new LanguageDetailsViewModel();  
              self.selectedLanguageViewModel(self.languageViewModels()[0]);
  
              applyBindings(self.selectedLanguageViewModel, "languageDetails");
  
              self.selectedLanguageViewModel().openPopUp();
          };
          initialize();
      };
  
      var LanguageDetailsViewModel = function () {
          var 
              self = this,
              closePopUp = function () {
                  self.isOpen(false);
              };
  
          self.Language = ko.observable("English");
  
          LanguageDetailsViewModel.prototype.isOpen = ko.observable(false);
  
          LanguageDetailsViewModel.prototype.openPopUp = function () {
              self.isOpen(true);
          };
  
          LanguageDetailsViewModel.prototype.cancelLanguage = function () {
              closePopUp();
          };
  
      };
  
      var initialize = new FranchiseDetailsViewModel();
  });​
  </code></pre>
  
  <p>The strange thing is that if I add this line of code to my onLanguageSelected method everyting works fine:</p>
  
  <pre><code>var language = new LanguageDetailsViewModel();
  </code></pre>
  
  <p>Fiddle:</p>
  
  <p><a href="http://jsfiddle.net/bZF9k/26/" rel="nofollow noreferrer">http://jsfiddle.net/bZF9k/26/</a></p>
  
  <p>Any help with working example will be greatly appreciated. Thanks!</p>
  
  <p>Update per RPNiemeyer`s post:</p>
  
  <p>I have added these lines of code to use the technique from here <a href="https://stackoverflow.com/questions/13858087/kendo-knockout-calling-a-method-that-changes-viewmodel-property-from-a-template">Kendo-Knockout: Calling a method that changes viewmodel property from a template with data-binding inside a grid, breaks bindings</a>:</p>
  
  <pre><code> ko.bindingHandlers.preventBinding = {
        init: function() {
            return { controlsDescendantBindings: true };
        }        
      };
  
      ko.bindingHandlers.kendoGrid.options.dataBound = function(data) {
        var body = this.element.find("tbody")[0];
  
        if (body) {
           ko.applyBindings(ko.dataFor(body), body);   
        }
      };
  </code></pre>
  
  <p>This is exactly what is happening in my application. When I open the pop up, close it and than open it again for the second time it is not closing correctly. Please see my updated fiddle:</p>
  
  <p><a href="http://jsfiddle.net/bZF9k/29/" rel="nofollow noreferrer">http://jsfiddle.net/bZF9k/29/</a></p>
  
  <p>What am I missing ? Thank You once again for your feedback!</p>