从淘汰赛绑定打开对话框时更改标题答案

【问题标题】：Change title when opening dialog from knockout binding从淘汰赛绑定打开对话框时更改标题
【发布时间】：2012-05-25 23:11:02
【问题描述】：

我的代码基于这个例子

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 属性，那就更好了{标题：选择产品名称}

【问题讨论】：

标签： jquery-ui knockout.js

【解决方案1】：

这是一个示例，它将.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，只是为了处理 selectedProduct 为空（可以在线完成）。

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

【讨论】：