Question

我的示例应用程序中有四个屏幕，登录，控制板，列表页面和详细信息页面，此处登录页面，控制板，列表页面绑定正在运行，但详细信息页面详细信息未按预期填充，工作示例{{ 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());

为什么它不会将数据填充到Details页面，我使用ko.obsevable（）绑定它，

Answer 1

您尚未绑定您的detailViewModel。

变化

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

到

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

详细信息页面不与敲除绑定

1 个答案: