Question

What is the best way to bind jQuery UI’s Dialog title attribute? Initially, on ko.applyBindings, KO successfully updates the title attribute. However, after .dialog() is called, the bindings are lost.

See the fiddle: http://jsfiddle.net/jordanarseno/YFBsQ/4/

I could just manually observe the textbox for keyup and make the changes to the title using:

$("input").live("keyup", function(){
    $("#dialog").dialog( "option", "title", $(this).val());
});

But, I’d like to move away from that and follow a more Knockout convention if possible.

What’s the best approach here? The question is regarding the title attribute, but it could, in theory, apply to any of Dialog’s options…

Answer 1

I’ve been know to use the subscribe function for this.

function viewModel() {
  var self = this;
  self.title = ko.observable('title');

  self.title.subscribe(function(newValue) {
    $('#dialog').dialog('option', 'title', newValue);
  });
}

jsfiddle it up

It’s functionally pretty similar to the custom binding method but a lot more straightforward.

Check out the bottom of this page for documentation.