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