Question

我的代码基于此示例

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

我设法通过创建另一个自定义绑定

来实现它

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：selectProduct.name}

Answer 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/

从敲除绑定打开对话框时更改标题

1 个答案: