RPNiemeyer剣道ノックアウトライブラリを使用しています。グリッドがあります。ユーザーがグリッドの行をクリックすると、ポップアップウィンドウが表示されます。ウィンドウを閉じて、同じ方法で再度開くと、アプリケーションが閉じたアニメーションでフリーズします。このシナリオをフィドルで再現するために、できる限りのことを試みました。ポップアップウィンドウを閉じて行をもう一度クリックすると、何も起こらず、ブラウザがリロードされます。私のアプリケーションでも同様のことが起こっていると強く信じています。
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("#=Language#") }\'>#=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();
フィドル：
実例の助けがあれば大歓迎です。ありがとう！
RPNiemeyerの投稿ごとの更新：
ここからテクニックを使用するために、これらのコード行を追加しました。Kendo-Knockout：グリッド内のデータバインディングを使用してテンプレートからviewmodelプロパティを変更するメソッドを呼び出すと、バインディングが解除されます。
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);
}
};
これはまさに私のアプリケーションで起こっていることです。ポップアップを開いたときに閉じてから、もう一度開くと正しく閉じません。私の更新されたフィドルを見てください：
私は何が欠けていますか？フィードバックありがとうございます！