Objects value not changing in UI with knockout js

Question

I am using jquery mobile list to represent data in UI, when user click on the the element,it go to details page of that record,

Page stateManage js

PageStateManager = (function () {
    var viewModels = {};

    var changePage = function (url, viewModel) {
        alert(">>>>>>>> "+ viewModel.runticketNumber());
        $.mobile.changePage(url, {viewModel: viewModel});
    };

    var registerViewModel = function (viewModelName, viewModel) {
        viewModels[viewModelName] = viewModel;
    };

    var initPage = function(page, newViewModel) {
        var viewModelName = page.attr("data-viewmodel");

        if (viewModelName) {
            if (newViewModel) {
                registerViewModel(viewModelName, newViewModel);
            }

            // get view model object
            var viewModel = viewModels[viewModelName];

            // apply bindings if they are not yet applied
            if (!ko.dataFor(page[0])) {
                ko.applyBindings(viewModel, page[0]);
                viewModel.errors = ko.validation.group(viewModel);
                ko.validation.group(viewModel).showAllMessages(false);
            }
        }
    };

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

    $(document).bind("pagechange", onPageChange);

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

Ticket js

function RunTicket(jsRunTicket) {
    var self = this;
    ko.mapping.fromJS(jsRunTicket, {}, this);    
    self.save = function(){
          alert(">>>> " +this.isValid());
    }

list view html

<div id="listViewDiv">
            <ul data-role="listview">
                <!-- ko foreach: tickets -->
                <li data-bind="click:$root.clickList">
                    <h2>Ticket No:<span data-bind="text:action"></span></h2>
                    <p>Item <span data-bind="text:deliveryNetworkName"></span></p>
                    <p class="ui-li-aside"><strong><span data-bind="text: runTicketType"></span></strong></p>
                </li>
                <!-- /ko -->
            </ul>
        </div>
}

View model

   var viewModel = {
         clickList : function(val){
            var rt = new RunTicket(service.getRunTicket(val.id));
            PageStateManager.changePage($("#detailsView"),rt);
        }
        seats :[{"action":"SAVE","bsW":null,"date":"2013-12-19T17:11:00","deliveryNetworkName":"XXXXX 7-2932H","runticketNumber":3957,"id":75837},{"action":"SAVE","bsW":null,"date":"2013-12-19T17:11:00","deliveryNetworkName":"XXXXX 7-2932H","runticketNumber":3958,"id":75837}] 
    }
applyBindings(viewModel,document.getElementById("firstPage"))

records not changing according to user selection,only contains the first value which user selected from the list,Could anyone help me to find the issue here

Answer 1

The problem is that you bind to a view model in you call to ko.applyBindings in your PageManager. After this, the view model will never change. You should make the currently selected hospital into an observable property on your view model and just set that observable property value on page change events.

I have updated your jsfiddle into a working sample which you can find at: http://jsfiddle.net/Hpyca/13/.