Атрибут доступа вне текущего контекста привязки в нокауте

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. Необходимо решить две проблемы, связанные с тем, что userName не отображается в пользовательском интерфейсе. Не удалось загрузить страницу сведений. Может ли кто-нибудь помочь мне решить эту проблему?

Спасибо,

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, это говорит мне, что ваша корневая модель имеет экземпляр DashboardViewModel на это как dashboardData, Предполагая, что вы привязаны к модели корневого представления в начале вашего цитируемого HTML, так как вы используете dashboardData.hospitalList чтобы попасть в список, я предполагаю, что это будет dashboardData.userName попасть по имени пользователя (из корня). Так, $root.dashboardData.userName, Или так как мы знаем dashboardData является потомком родительского контекста, $parent.dashboardData.userName,