Create a generic class to bind knockout object wit

Question

I am bit new to knockout and jquery mobile, There was a question which is already answered, I need to optimize the PageStateManager class to use generic bindings, currently PageStateManager can only use for one binding,I would really appreciate if someone can guide me to create a generic class to manage page states with knockout bindings Heere is the working code,http://jsfiddle.net/Hpyca/14/

PageStateManager = (function () {
    var viewModel = {
        selectedHospital: ko.observable()
    };

    var changePage = function (url, viewModel) {
        console.log(">>>>>>>>" + viewModel.id());
        $.mobile.changePage(url, {viewModel: viewModel});
    };

    var initPage = function(page, newViewModel) {
        viewModel.selectedHospital(newViewModel);
    };

    var onPageChange = function (e, info) {
        initPage(info.toPage, info.options.viewModel);
    };

    $(document).bind("pagechange", onPageChange);
    ko.applyBindings(viewModel, document.getElementById('detailsView'));

    return {
        changePage: changePage,
        initPage: initPage
    };
})();

Html

<div data-role="page" data-theme="a" id="dashBoardPage" data-viewModel="dashBoardViewModel">
    <button type="button" data-bind="click: goToList">DashBoard!</button>
</div>

New dashboard model

    var dashBoardViewModel = function() {
        var self = this;
        self.userName = ko.observable('Welcome! ' + "UserName");
        self.appOnline = ko.observable(true);

        self.goToList = function(){
            //I would like to use PageStateManager here 
    //        PageStateManager.changePage($("#firstPage"),viewModel);
            ko.applyBindings(viewModel,document.getElementById("firstPage"));//If I click Dashbord button multiple times it throws and multiple bind exception
            $.mobile.changePage($("#firstPage"));  
        }
    }
ko.applyBindings(dashBoardViewModel,document.getElementById("dashBoardPage"));

update url : http://jsfiddle.net/Hpyca/14/ Thank you in advance

Answer 1

I would probably go for creating a NavigationService which only handles changing the page and let knockout and my view models handle the state of the pages.

An simple example of such a NavigationService could be:

function NavigationService(){
    var self = this;

    self.navigateTo = function(pageId){
        $.mobile.changePage($('#' + pageId));
    };
}

You could then, in your view models just call it when you want it to navigate to a new page. One example would be upon selection of a hospital (which could be done either via a selection function or by manually subscribing to changes to the selectedHospital observable):

self.selectHospital = function(hospital){
    self.selectedHospital(hospital);
    navigationService.navigateTo('detailsView');
};

Other than the call to the navigationService to navigate, it's just ordinary knockout to keep track of which viewmodel should be bound where. A lot easier than having jquery mobile keeping track of which viewmodel goes where, if you ask me.

I have updated your jsfiddle to show a sample of how this could be done, making as few changes as possible to the HTML code. You can find the updated fiddle at http://jsfiddle.net/Hpyca/15/