Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

KnockoutJS - Update ViewModel / Mapping Plugin

How can i update the complete viewModel ?

  1. On page load i get a Model and convert that using ko.mapping.fromJS(myObject) to a viewModel.
  2. If the user clicks a button i want to get updated data from the server
  3. Now i want to apply theese updates

If i use ko.applyBindings(viewModel); it updates the ui perfectly. But it adds the same events again. So if the user clicks the button, the event gets fired twice, third and so on.

Question

What is a good way to update my complete viewModel. Maybe i remove the bindings and apply them again ? (how to do this).

Sample

var viewModel;

function update() 
{
    $.ajax({
        url: '...',
        type: "GET",
        statusCode: {
            200: function (data) {
                 viewModel = ko.mapping.fromJS(data);
                 ko.applyBindings(viewModel);
            }
        }
    });    
}

// first call after page load
update();

// user click
$("#myButton").click(function() {
    update(); 
});

Update

Steve Greatrex Could you post your custom binding implementation?

ko.bindingHandlers.domBinding = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        viewModel.domElement = element;
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        viewModel.domElement = element;
    },
};
like image 958
dknaack Avatar asked Aug 02 '12 13:08

dknaack


People also ask

What is Ko mapping fromJS?

var viewModel = ko.mapping.fromJS(data); This automatically creates observable properties for each of the properties on data .

What is KnockoutJS used for?

KnockoutJS is basically a library written in JavaScript, based on MVVM pattern that helps developers build rich and responsive websites.

What is Ko applyBindings?

For example, ko. applyBindings(myViewModel, document. getElementById('someElementId')) . This restricts the activation to the element with ID someElementId and its descendants, which is useful if you want to have multiple view models and associate each with a different region of the page.


2 Answers

If you look at the 'Specifying the update target' on the mapping documentation, you can specify a target for the mapping.

This should mean that you can say:

if (!viewModel)
   viewModel = ko.mapping.fromJS(data);
else
   ko.mapping.fromJS(data, {}, viewModel); 

This way you will create a view model on the initial load, then update that view model for any subsequent loads.

like image 146
Steve Greatrex Avatar answered Oct 13 '22 11:10

Steve Greatrex


Using mapping plugin I did this

ko.mapping.fromJS(JsonResponse, myObservable());

That's all.

like image 29
Afonso Praça Avatar answered Oct 13 '22 10:10

Afonso Praça