Question

在这里，我想在列表顶部打印用户名的值，列表值显示为我所期望的，但用户名未显示，http://jsfiddle.net/Hpyca/16/ Html

   <div data-role="page" id="dashBoardPage" data-bind="with: dashboardData">
    <button type="button" data-bind="click: goToList">DashBoard!</button>
</div>

<div data-role="page" id="firstPage" data-bind="with: dashboardData.hospitalList">
    <div>
        <h4>User Name <span data-bind="text:$root.dashboardData.userName"></span></h4>
        <div id="listViewDiv">
             <ul data-role="listview" data-bind="foreach: hospitals">
                <li data-bind="click:$root.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" data-bind="with: dashboardData.hospitalList.selectedHospital">
    <a href="#firstPage">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>

物体

function NavigationService(){
    var self = this;

    self.navigateTo = function(pageId){
        $.mobile.changePage($('#' + pageId));
    };
}

var navigationService = new NavigationService();

function HospitalViewModel(data){
    var self = this;
    self.id = data.id;
    self.name = ko.observable(data.name);
}

function DashboardViewModel(parentView){
    var self = this;
    self.userName = ko.observable("Ude"); 
    self.hospitalList = ko.observable();
    //This list should be retrieved from a service of some kind
    var allHospitals = [
        {"id":"001","name":"Hospital1","location":"SL"},
        {"id":"002","name":"Hospital2","location":"SL"}
    ].map(function(hospital){return new HospitalViewModel(hospital);});


    self.goToList = function(){
        self.hospitalList(new HospitalListViewModel(allHospitals));
        navigationService.navigateTo('firstPage');
    };
}

    function HospitalListViewModel(data){
        var self = this;

        self.hospitals = data;
        self.selectedHospital = ko.observable();

        self.selectHospital = function(hospital){
            self.selectedHospital(hospital);
            navigationService.navigateTo('detailsView');
        };
    }

    function PageViewModel(){
        var self = this;
        self.dashboardData = new DashboardViewModel(self);
    }

    ko.applyBindings(new PageViewModel());

我想在DashboardViewModel中实现我的listview，有两个问题需要解决 userName没有在UI中显示，无法加载详细信息页面，任何人都可以帮我解决这个问题

谢谢，

Answer 1

我想你想要

<h4>User Name<span data-bind="text:$root.dashboardData.userName"></span></h4>

或者

<h4>User Name<span data-bind="text:$parent.dashboardData.userName"></span></h4>

鉴于userName和hospitalList是您DashboardViewModel中的同行，并且您将hospitalList称为dashboardData.hospitalList，这告诉我您的根视图model上的DashboardViewModel实例为dashboardData。因此，假设您在引用的HTML开头绑定了根视图模型，因为您使用dashboardData.hospitalList来获取列表，我认为它是dashboardData.userName来获取用户名（从根目录）。所以，$root.dashboardData.userName。或者，因为我们知道dashboardData是父上下文的子项$parent.dashboardData.userName。

在淘汰赛中当前绑定上下文之外的访问属性

1 个答案: