Question

I have based my code on this example

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

When you select an item I want the title of the dialog to have a observable’s value

I managed to to it by creating another custom binding

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

    }
}

Added a new observable to viewmodel and set it when the item is selected

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

Working example: http://jsfiddle.net/WpnTU/76/

It works but I do not like it, it adds a new observable which is very coupled with the GUI, it would be much nicer if I could use the already exiting selectProduct observable and point out the name property in the GUI something like { title: selectProduct.name }

Answer 1

Here is a sample that moves the .dialog calls into the update function and unwraps the options, so that it will be triggered any time that something changes.

//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);
        }            
    }
};

I added a computed observable to your sample just to handle the selectedProduct being null (could be done in-line).

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