Отображение имени пользователя после входа в систему с помощью knockout js

У меня есть экран входа в систему, после входа пользователя на экран, я хочу показать имя пользователя в верхней части панели управления, я использую jout для нокаута, чтобы сделать это. Ниже мой сценарий и html-код

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(){
    var self = this;
    self.uId =  ko.observable();
}    
function PageViewModel (){
   var self = this;
   self.loginModel = new LoginViewModel(self);
   self.dashboardViewModel = new DashboardViewModel(self);  
}

function NavigationService(){
    var self = this;
    self.navigateTo = function(pageId){
        $.mobile.changePage(pageId);
    };
}

var navigationService = new NavigationService();
ko.applyBindings(new PageViewModel());

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>
    </div>    
</div>    

Удалена проверка имени пользователя из кода, рабочий пример http://jsfiddle.net/uderox/gY9Nt/2/