詳細信息頁面不與淘汰賽綁定

我的示例應用程序中有四個屏幕，登錄，儀表板，列表頁面和詳細信息頁面，此處登錄頁面，儀表板頁面綁定正在工作，但詳細信息頁面詳細信息未填充爲我所料，工作示例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());

爲什麼不填充數據詳細信息頁面，我使用ko.obs結合它evable（），

來源

2014-04-21 ExCode

您還沒有綁定您的detailViewModel。

變化

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

到

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

來源

2014-04-21 06:53:20

詳細信息頁面不與淘汰賽綁定

回答

相關問題