javascript - 剑道击倒 : Window does not close correctly

Question

我正在使用 RPNiemeyer kendo-knockout 库。我有一个网格。当用户单击一行网格时，会显示一个弹出窗口。当您关闭窗口并以相同的方式再次打开它时，应用程序会因关闭动画而卡住。我尽我所能地用 fiddle 重现这个场景。在 fiddle 中，当您关闭弹出窗口并再次单击该行时，什么也没有发生，浏览器将重新加载。我坚信我的应用程序中正在发生类似的事情。

html:

<div data-viewId="languageList" >
    <div id="languageList" data-bind="with: viewModel">
        <div id="languageListGrid" data-bind="kendoGrid: { data: languageViewModels, columns: [ 
                { 
                    template: '<a href=\'\' data-bind=\'click: function() { onLanguageSelected(&quot;#=Language#&quot;) }\'>#=Language#</a>', 
                    field: 'Language', 
                    title: 'Language',
                    width: 50
                }

                ], 
            scrollable: false, sortable: true, pageable: false }" style="height: 380px">

        </div>
    </div>
</div>

<div data-viewid="languageDetails">
    <div id="languageDetails" data-bind="with: viewModel" class="hidden">
        <form id="languageDetailsForm" action="" style="font-family: Trebuchet MS, Verdana, Helvetica, Sans-Serif;">
        <div data-bind="kendoWindow: {isOpen: isOpen, title:'Language', width: 400, height: 200, modal: true }" >
            test
            <button id="cancelLanguage" class="k-button" data-bind="click: cancelLanguage">Cancel</button>
        </div>
       </form>
    </div>
</div>​

JavaScript:

$(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();
});​

奇怪的是，如果我将这行代码添加到我的 onLanguageSelected 方法中，一切正常:

var language = new LanguageDetailsViewModel();

fiddle :

http://jsfiddle.net/bZF9k/26/

任何对工作示例的帮助将不胜感激。谢谢!

根据 RPNiemeyer 的帖子更新:

我添加了这些代码行以使用此处的技术 Kendo-Knockout: Calling a method that changes viewmodel property from a template with data-binding inside a grid, breaks bindings :

 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);   
      }
    };

这正是我的应用程序中发生的情况。当我打开弹出窗口时，关闭它，然后再次打开它，但它没有正确关闭。请查看我更新的 fiddle :

http://jsfiddle.net/bZF9k/29/

我错过了什么？再次感谢您的反馈!

Answer 1

看起来窗口关闭后没有正确清理。这通常不是问题(并且是可取的)，但如果重新渲染网格，则会初始化一个新的 kendoWindow，它不知道外面已经有一个窗口。

或许可以在 knockout-kendo 代码中处理这个问题。窗口的 destroy 方法已经被调用，所以我需要研究为什么它实际上没有删除窗口元素。

目前的解决方法是为窗口关闭时配置一个全局处理程序，例如:

  ko.bindingHandlers.kendoWindow.options.close = function() {
      $('.k-window, .k-overlay').remove();
  };

此处示例:http://jsfiddle.net/rniemeyer/dcYRM/