1

我的代码基于这个例子

http://jsfiddle.net/rniemeyer/WpnTU/

当您选择一个项目时，我希望对话框的标题具有可观察的值

我设法通过创建另一个自定义绑定来做到这一点

ko.bindingHandlers.dialogOptions = {
    update: function(element, valueAccessor) {
        var options = ko.utils.unwrapObservable(valueAccessor());
        if (options ) {
          $(element).dialog(options);
        }         

    }
}

为 viewmodel 添加了一个新的 observable 并在选择项目时设置它

this.selectProduct = function(product) {
        self.dialogOptions({ title: product.name() });
        self.selectedProduct(product);
}

工作示例：http: //jsfiddle.net/WpnTU/76/

它可以工作，但我不喜欢它，它添加了一个与 GUI 非常耦合的新 observable，如果我可以使用已经退出的 selectProduct observable 并指出 GUI 中的 name 属性，例如 { title:选择产品名称 }

4

1 回答 1

2

这是一个将.dialog调用移动到update函数中并解包选项的示例，以便在任何时候发生变化时都会触发它。 

//custom binding to initialize a jQuery UI dialog
ko.bindingHandlers.jqDialog = {
    init: function(element) {
       ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            $(element).dialog("destroy");
        }); 
    },
    update: function(element, valueAccessor) {
       var options = ko.toJS(valueAccessor());

        if (options) {
            $(element).dialog(options);
        }            
    }
};

我向您的示例添加了一个计算的 observable，只是为了处理selectedProductnull （可以在线完成）。

http://jsfiddle.net/rniemeyer/Gt5Hw/

于 2012-05-25T15:11:02.793 回答