为什么这两个按钮会打开具有不同上下文的对话框?
<div data-bind="with: SelectedText" >
<div id="dialog" data-bind="dialog: {'autoOpen': false, 'title': TextbatchTitle }, dialogVisible: $root.isDialogOpen">
<button data-bind="click: $root.openDialog">Open</button>
<button data-bind="click: $root.newTextbatch">Add New</button>
</div>
其中:
self.Textbatches = ko.observableArray();
self.isDialogOpen = ko.observable(false);
self.newTextbatch = function () {
var newitem = new Textbatch({
TextbatchId: -1,
TextbatchTitle: "...your text title...",
});
self.Textbatches.push(newitem);
self.editTextbatch(newitem);
};
self.editTextbatch = function (item) {
self.SelectedText(item);
self.isDialogOpen(true);
};
self.openDialog = function (item) {
self.isDialogOpen(true);
}
按下“打开”按钮时,我会看到一个带有SelectedText上下文的对话框。 当按下“添加新”按钮时,我会看到一个包含前一个SelectedText上下文的对话框。
对话框绑定如下:
ko.bindingHandlers.dialog = {
init: function (element, valueAccessor, allBindingsAccessor) {
var options = ko.utils.unwrapObservable(valueAccessor()) || {};
//do in a setTimeout, so the applyBindings doesn't bind twice from element being copied and moved to bottom
setTimeout(function () {
options.close = function () {
allBindingsAccessor().dialogVisible(false);
};
$(element).dialog(ko.toJS(options));
}, 0);
//handle disposal (not strictly necessary in this scenario)
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
$(element).dialog("destroy");
});
},
update: function (element, valueAccessor, allBindingsAccessor) {
var shouldBeOpen = ko.utils.unwrapObservable(allBindingsAccessor().dialogVisible),
$el = $(element),
dialog = $el.data("uiDialog") || $el.data("dialog"),
options = valueAccessor();
//don't call dialog methods before initilization
if (dialog) {
$el.dialog(shouldBeOpen ? "open" : "close");
for (var key in options) {
if (ko.isObservable(options[key])) {
$el.dialog("option", key, options[key]());
}
}
}
}
};