Bidirectional binding of data attribute with Knockout

Question

I have something like that:

Html:

<label id="CustomerName" data-bind="text: name, attr: {'data-value': name}"></label>

Script:

var viewModel = {
   name : ko.observable("Original Name");
}

ko.applyBindings(viewModel);

I want to be able to change the data attribute programmatically with the help of jQuery.

$("#CustomerName").data("value", "NewName");

After changing the value of the data attribute, I don't see my change back in the linked property of the viewmodel.

Is it a normal behavior of Knockout to not synching viewmodel properties bound to data attribute?

If the data attribute are not bidirectional, what would be the best way to do this? Hidden field?? You understand I don't want input field like textbox? Yeah! Ahhh ok,... :)

Thank you.

James McConnell James McConnell · Accepted Answer · 2014-01-29T19:07:35

If you're changing the value in jQuery outside of your Knockout view model, you have to do the following:

$('#CustomerName').val('NewName'); // Works the same way as your example
$('#CustomerName').change();

Since Knockout subscribes to the change() event on its bindings, you have to fire the change() event so that Knockout knows it changed. You don't need the "data-" attribute, just bind the text to the observable on your view model, Knockout takes care of the rest.

Bidirectional binding of data attribute with Knockout

2 Answers