CODEWITHSUNDEEP
javascriptmvvmknockout.js
capiono
capiono

Reputation: 2997

Refresh ViewModel on observable change

For instance I have the following model:

var Volume = function (id, path, isactive) {
        var self = this;

        self.id = ko.observable(id);
        self.path = ko.observable(path);
        self.isactive = ko.observable(isactive);

        self.Save = function (data) {
           //ajax post
        }

        self.Update = function (data) {
           //ajax post
        }
    }

    var ViewModel = function (data) {
        var self = this;
        self.volumes = ko.observableArray(data.volumes.map(function (item) {
            return new Volume(item.id, item.path, item.isActive, item.description);
        }));

        self.AddVolume = function () {
            self.volumes.push(new Volume());
        }
    }

After Save or Update, I want to refresh the parent ViewModel from Volume model, because some values have changed in the database.

How do I reinitialize the ViewModel? 

var viewModel = new ViewModel(ko.utils.parseJson(data) || []);
ko.applyBindings(viewModel);

Upvotes: 0

Views: 502

Answers (2)

Mateen Kajabadi
Mateen Kajabadi

Reputation: 3634

You can have a function in your parent model which loads the new data and populates new data. Then anywhere you need to get the new data you simply call that function.

Example :

   var Volume = function (data) {
        var self = this;

        self.id = ko.observable(data.id);
        self.path = ko.observable(data.path);
        self.isactive = ko.observable(data.isactive);

        self.Save = function (data) {
           //ajax post
           //whenever you want to load data again you call viewModel.Load();
        }

        self.Update = function (data) {
           //ajax post
           //whenever you want to load data again you call viewModel.Load();

        }
    }

    var ViewModel = function () {
        var self = this;
        self.volumes = ko.observableArray();
        self.Load = function (){
           //your ajax call or whatever you do to get the data 
           self.volumes($.map(data.volumes, function (item) {  
                return new Volume(item);
            }
        }
        self.AddVolume = function () {
              obj = {id:"",path:"",isactive:false}
            // need to pass data to Volume model
            self.volumes.push(new Volume(obj));
        }
    }

    var viewModel = new ViewModel();
    viewModel.Load();
    ko.applyBindings(viewModel);

I'd suggest you to have save and update functions in your parent model and use $parent array object in order to reference.

Upvotes: 1

Nair Athul
Nair Athul

Reputation: 821

I think you dont need to refresh the parent vm, If you need you can changes the particular index of the array from the value after update. Or call the getall method and push all the values after clearing the old values in the array(but it is not recomended). Or you can refresh the page. Choose wisely

Upvotes: 0

Related Questions