2014-04-17 2 views
0

로그인 화면이 있습니다. 화면에 사용자가 로그인 한 후 대시 보드 상단에 사용자 이름을 표시하고 싶습니다. knockout js를 사용하여 this.below를 사용하고 있습니다. 내 스크립트와 html입니다. 코드knockout 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(){ 
    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/

+0

* 부모 * parant하지 ... – Tanner

답변

4

변경이 줄을

parantModel.dashboardViewModel.uId= self.userName; 

parantModel.dashboardViewModel.uId(self.userName()); 

에 pseudospeek : 당신은 사용자 이름는 GET()에서() UID 설정이 방법