使用Knockout.js对话框绑定时获取错误的上下文

时间:2013-12-16 12:30:54

标签: jquery jquery-ui knockout.js

为什么这两个按钮会打开具有不同上下文的对话框?

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

0 个答案:

没有答案