KnockoutJS update ViewModel on a hidden page

Question

I have my index page where I display a list of items. The index page is observable. I click on a record in the list to load the detail page where the user can modify the data. I can successfully post the modifications to the server using jQuery ajax and I am returned an updated record so I can updated the list on the index page. I can't figure out how to update the underling data for the index page with the results from posting update to server. I've tried instantiating a new IndexViewModel, but the UI doesn't reflect the new model. I've tried ko.mapping.fromJS(sourceData, targetObservableViewModel), but the UI for the Index page does not update. How can I update the underlying data for the Index page from a successful ajax submission on a totally different page?

        ApplicationUtils.AjaxRequestSendData
    (
        'POST',
        saveUrl,
        dataModel,
        function (jsonFromServer)
        {
            updateViewModel(jsonFromServer, self.activeGamesList);
            history.back();
        },
        function (resultsFromServer)
        {
            alert('errror happened.  not sure what happened though.');
        }           
    );

var updateViewModel = function (sourceData, targetObservableViewModel){
ko.mapping.fromJS(sourceData, targetObservableViewModel);};

Thanks for your help.

Dominictus Dominictus · Accepted Answer · 2013-11-05T09:29:31

I'd place a comment instead of answer to ask for further details on other technologies used, but not enough rep yet :(

In this case, you can use two solutions:

Simple, but expensive: when your viewmodel loads, first thing you do is delete existing data and query for new data from server.
Make another javascript object hold your data and pass it on through different viewmodels. In this case, instead of going back and forth to server for new data, your viewmodels would hold only pointers to data and when saving, you would tell that javascript object to handle your save/reload. Once data changes, your other viewmodel would instantly "see" the change because it holds a pointer to that data.

2nd option is based on really simple and effective solution offered in Hot Towel SPA template - so if you can, I suggest you check it out and see if you can use any of it.

KnockoutJS update ViewModel on a hidden page

2 Answers