세부 정보 페이지가 녹아웃과 바인딩되지 않습니다.

Question

샘플 애플리케이션, 로그인, 대시 보드, 목록 페이지 및 세부 정보 페이지에 4 개의 화면이 있습니다. 로그인 페이지, 대시 보드, 목록 페이지 바인딩이 작동하지만 세부 정보 페이지 세부 정보가 다음과 같이 채워지지 않습니다. 나는 세부 사항 페이지에 데이터를 채우지 않습니다 왜, 내가 ko.obs를 사용하여 바인딩하고 예를 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"> 
    <a href="#listViewPage">Back</a> 
    <a href="#dashBoardPage">Home</a> 
    <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()); 

작업 예상 evable(),

Answer 1

detailViewModel을 바인딩하지 않았습니다.

변화

<div data-role="page" id="detailsView"> 

<div data-role="page" id="detailsView" data-bind="with:detailViewModel"> 

행