Knockout js mapping plug in not working

Question

I am working on knockout js framework and using mapping plugin to update the view model with data that was saved previously as written in the fiddle below.

HTML:

<a href="#" onclick="outputJson();">Click here for output Json</a>
<a href="#" onclick="reloadData();">Click here to load old data</a>
</br>
<input type="text" data-bind="value:firstName" />
<input type="text" data-bind="value:lastName" />
<span data-bind="text:fullName"></span>

Javascript:

     var updatedData = [];
            var viewModel = {
                myviewmodel: ko.observable().extend({noitfy:'always'})
            };
            function appViewModel() {
                var self = this;
                self.firstName = ko.observable('Bob');
                self.lastName = ko.observable('Smith');
                self.fullName = ko.computed(function () {
                    return self.firstName() + " " + self.lastName();
                });
            }
            viewModel.myviewmodel(new appViewModel());

            $(function () {
                ko.applyBindings(viewModel.myviewmodel);
            });
            function outputJson() {
               var unmapped = ko.mapping.toJS(viewModel.myviewmodel);
               updatedData.push(unmapped);
               viewModel.myviewmodel(new appViewModel());
            }
            function reloadData() {
                viewModel.myviewmodel(ko.mapping.fromJS(updatedData[0]));
            }

JS Fiddle

But whenever i use unmap option the viewmodel using ko.mapping plugin the computed observable is not updating.

The scenario is. 1. give first name = 'Bob123', last name = 'Smith' 2. Now click on "Click here for output Json" button, so that the data will be saved temporarly 3. Click on "Click here to load old data" now we can get the old data firstname='Bob123',lastname='Smith', but when i change any of these fields first name or last its not updating the full name.

Can some one tell me how can i make the computed field work on unmap?

Captain John Captain John · Accepted Answer · 2013-12-24T14:12:58

The reason you are getting this problem is because Your view model is bound to a specific instance of the observable values. FirstName, LastName etc.

So when you reload data I would suggest the following change:

viewModel.myviewmodel.firstName(updatedData[0].firstName);

viewModel.myviewmodel.firstName(updatedData[0].lastName);

In this way you are not creating new instances of the objects to which your view is bound.

If you remove an object from memory as you are doing then the binding is no longer valid.

You could cleanNode and applyBindings again for your specific div, which I have not really used. Which would allow you to re-bind your viewModel to new data. This gets very inflexible if bindings change.

If you have a large number of values to update my best suggestion would be to make use of the associative array properties of javascript as follows:

for (var prop in updatedData[0]) {
    viewModel.myviewmodel[prop](updatedData[0][prop]);
}

Knockout js mapping plug in not working

1 Answers