ember.js를 사용하여 하위 뷰 사이를 전환 하시겠습니까?

Question

두 자식 사이를 전환하는 뷰를 렌더링하려고합니다. (또는 그래서 희망합니다.) 뭔가 올바르게 작동하지 않습니다. app.js에

{{#view App.LoginFormView isVisibleBinding="user.isNotAuthenticated" }} 
Username: {{view Ember.TextField valueBinding="user.loginName"}}/
Password: {{view Ember.TextField valueBinding="user.userPassword" type="password"}} 
<button class="btn" {{ action "login" }} {{bindAttr disabled="user.isNotValid"}}>Login</button> 
{{/view}} 

{{#view App.LoginInfoView isVisibleBinding="user.isAuthenticated" }} 
You are logged in as {{user.loginName}}. Click <a {{action "logout"}}>here</a> to logout 
{{/view}} 

나는 다음과 같은 한 : 여기 내 템플릿입니다

App.User = Ember.Object.extend({ 
    loginName:'', 
    userPassword:'', 
    rememberMe:true, 
    isNotValid:function(){ 
     return (this.get("loginName") == '') || (this.get("userPassword") == ''); 
    }.property('loginName', 'userPassword'), 
    isAuthenticated:false, 
    isNotAuthenticated:function(){ 
     return !this.isAuthenticated; 
    }.property('isAuthenticated') 
}); 

App.AuthenticationController = Ember.Controller.extend({ 
    login:function() { 
     alert("loginName:"+this.user.get('loginName')+";\n"+ 
       "userPassword:"+this.user.get('userPassword')+";\n"+ 
      "rememberMe:"+this.user.get('rememberMe')+";\n"); 
     this.user.isAuthenticated = true; 
    }, 
    user:App.User.create() 
}); 
App.AuthenticationView = Ember.View.extend({ 
    templateName: 'authentication', 
    userBinding:"App.AuthenticationController.user" 
}); 

App.LoginFormController = Ember.Controller.extend({ 
    userBinding:"App.AuthenticationController.user" 
}); 
App.LoginFormView = Ember.View.extend(); 

App.LoginInfoController = Ember.Controller.extend({ 
    userBinding:"App.AuthenticationController.user" 
}); 
App.LoginInfoView = Ember.View.extend(); 

App.Router = Ember.Router.extend({ 
    enableLogging:true, 
    root: Ember.Route.extend({ 
     index: Ember.Route.extend({ 
      route: '/', 
      connectOutlets: function(router){ 
       router.get('applicationController').connectOutlet('authentication','authentication'); 
      }, 
      login:function(router){ 
       router.get('authenticationController').login(); 
      } 
     }) 
    }) 
}); 

오전 데 문제가보기 IsAuthenticated는 속성의 변화에 ​​전환하지 않습니다. 나는 자동적으로 일어날 인상을 받고 있었지만 아직 그렇지 않다. 이 방법을 만드는 방법에 대한 아이디어가 있습니까? 또는 나는 근본적인 뭔가를 놓치고있다. (ember.js 초보자는 여기에 온순하게 따라야한다 :-))

건배, Alex.

당신은 다음과 같은 방법으로 사용자 인증을 구현할 수 있습니다

Answer 1

는 : 템플릿에서

은 (_header.hbs 템플릿 예를 들어 application.hbs에 대한 부분이다)

응용 프로그램 컨트롤러에서

{{#if needAuth}} 
    // login form goes here 
    <button {{action submitLogin}}>login</button> 
{{else}} 
    <small {{action logout}}>logout</small> 
{{/if}} 

:

submitLogin: function() { 
    // do login stuff 

    // if login success 
    that.set('needAuth', false); 
    // else 
    that.set('needAuth', true); 
}); 

DOM이 자동으로 업데이트됩니다. 다른 부분 템플릿에서는 {{#if needAuth}}도 사용할 수 있습니다.