Detail page does not bind with knockout - jquery-mobile

Question

There are four screens in my sample application, Login,Dash Board, List Page and Details Page,Here login page, Dash Board , List Page bindings are working, but Details page details not populate as I expected, working example http://jsfiddle.net/uderox/gY9Nt/3/
Html
<div data-role="page" data-theme="a" id="loginPage" data-bind="with:loginModel">
<div data-role="content">
<p>
<input type="text" class="input" placeholder="username" data-bind="value: userName"/>
<input type="password" class="input" placeholder="Password" data-bind="value: password"/>
</p>
<p>
<button data-bind='click: submit'>Login</button>
</p>
</div>
</div>
<div data-role="page" data-theme="a" id="dashBoardPage" data-bind="with:dashboardViewModel">
<div data-role="content">
<label>User Id<span data-bind="text:uId"></span></label>
<input type="button" value="Click" data-bind="click:goToList"/>
</div>
</div>
<div data-role="page" id="listViewPage" data-bind="with:listViewModel">
<div>
<div id="listViewDiv">
<ul data-role="listview" data-bind="foreach: hospitalList">
<li data-bind="click: $parent.selectHospital">
<h2>Hospital Id:<span data-bind="text:id"></span></h2>
<p>Name <span data-bind="text:name"></span></p>
</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="detailsView">
Back
Home
<div>
<h2>Hospital Id : <span data-bind="text:id"></span></h2>
<input data-mini="true" tabindex="5" data-bind="value: name"
id="name"/>
</div>
</div>
Js
var LoginViewModel = function (parantModel) {
var self = this;
self.userName = ko.observable();
self.password = ko.observable();
self.submit = function () {
parantModel.dashboardViewModel.uId(self.userName());
navigationService.navigateTo($('#dashBoardPage'));
}
}
var DashboardViewModel = function(parentModel){
var self = this;
self.uId = ko.observable();
self.goToList = function(){
navigationService.navigateTo($('#listViewPage'));
}
}
var ListViewModel = function(parentViewModel){
var self = this;
self.selectedHospital = ko.observable();
var objList = [{"id":"001","name":"Hospital1","location":"SL"},{"id":"002","name":"Hospital2","location":"SL"}].map(function(hospital){return new HospitalViewModel(hospital);});
self.hospitalList = objList;
self.selectHospital = function(hospital){
parentViewModel.detailViewModel(hospital);
alert("000");
navigationService.navigateTo($('#detailsView'));
};
}
var HospitalViewModel = function(data){
var self = this;
self.id = data.id;
self.name = ko.observable(data.name);
}
function PageViewModel (){
var self = this;
self.loginModel = new LoginViewModel(self);
self.dashboardViewModel = new DashboardViewModel(self);
self.listViewModel = new ListViewModel(self);
self.detailViewModel = ko.observable();
}
function NavigationService(){
var self = this;
self.navigateTo = function(pageId){
$.mobile.changePage(pageId);
};
}
var navigationService = new NavigationService();
ko.applyBindings(new PageViewModel());
Why it does not populate data to Details page,I am binding it using ko.obsevable(),

Answer 1

You haven't bound your detailViewModel.
change
<div data-role="page" id="detailsView">
to
<div data-role="page" id="detailsView" data-bind="with:detailViewModel">