Access attribute outside of the current binding context in knockout

Question

Here I want to print the value of the user name in the top of the list,List values display as I expected, but username does not show, 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> 

objects

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());

I want to implement my listview in DashboardViewModel,There are two problems need to address userName does not show in UI, Couldn't load detail page, can anyone help me to solve this

Thank you,

Answer 1

I think you want

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

or alternately

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

Given that userName and hospitalList are peers in your DashboardViewModel, and you're referencing hospitalList as dashboardData.hospitalList, that tells me that your root view model has an instance of DashboardViewModel on it as dashboardData. So assuming that you're bound to the root view model at the beginning of your quoted HTML, as you're using dashboardData.hospitalList to get at the list, I assume it would be dashboardData.userName to get at the username (from the root). So, $root.dashboardData.userName. Or since we know dashboardData is a child of the parent context, $parent.dashboardData.userName.