使用ember.js切換子視圖？

我想呈現一個視圖，它的兩個孩子之間切換（或者我希望如此），而某些事情並不完全正常。這裏是我的模板：使用ember.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.js我有以下幾點：

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新手在這裏，所以要溫柔:-)）

乾杯，亞歷克斯。

來源

2012-11-19 ash

您可能需要查看[Router Primer]（http://emberjs.com/guides/router_primer/）。 – zentralmaschine

我做了，沒有它沒有幫助。 – ash

這是什麼現狀？我的意思是，兩個視圖同時顯示嗎？另外，這些視圖模板是否在另一個視圖模板（如父視圖？）內呈現，如果是這種情況，您可能希望將綁定更改爲像'isVisibleBinding =「parentView.user.isNotAuthenticated」' '綁定來自父視圖。我相信這個'parentView'必須用於1.0pre或pre2這些情況下 – MilkyWayJoe

您可以通過以下方式實現用戶認證：

在你的模板（例如，在_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}}。

來源

2013-05-04 21:22:37

使用ember.js切換子視圖？

回答

相關問題