Update knockoutjs viewmodel when dom text changes

Question

I need the underling data to be updated when the bound table cell text is updated.

What do I need to do to make the update work?

example : http://jsfiddle.net/2hdRp/1/

Answer 1

I'm not sure if this is not already implemented in KnockoutJs framework.

This is my custom bindings for You question:

ko.bindingHandlers.textValue = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
         // First get the latest data that we're bound to
        var value = valueAccessor(), allBindings = allBindingsAccessor();
        var valueUnwrapped = ko.utils.unwrapObservable(value); 

        $(element).change(function(){
            value($(this).text());
        });
    },
    update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        var value = valueAccessor(), allBindings = allBindingsAccessor();
        var valueUnwrapped = ko.utils.unwrapObservable(value); 
        $(element).text(valueUnwrapped);
    }
};

Binding will look like:

<td id="idCell" data-bind="textValue: Car.id, valueUpdate: 'change'"
    class="header"></td>

Working example: http://jsfiddle.net/AlfeG/dNtNb/

Answer 2

您应该更改基础值（可观察的），而不是更新DOM。

Answer 3

Ok, this was a bad question with a bad example. I wanted to know how to update the ViewModel whenever when the dom changes in cases where there is no input control, like contenteditable , or dynamic controls that update the dom.

Anyway, I like AlfeG's answer and this similar answer here .

But, I opted for using the new dataFor helper function. Using that, I can easily update the underlying ViewModel.

Example: http://jsfiddle.net/2hdRp/3/