2014-04-05 53 views
0

我創建了一個小的jsfiddle,它不使用ember 1.5和handlebars 1.3執行登錄權限。登錄控制器擁有設置爲true的屬性「isLogin」。但爲什麼事後沒有其他路線和模板注意到這種變化?Ember控制器似乎在模板和路由中創建了多個實例?

<script type="text/x-handlebars"> 
    {{#if controllers.login.isLogin}} 
    <div class="container"> 
     <div class="navbar"> 
     <div class="navbar-inner"> 
      <a class="brand" href="#">Ember Digest</a> 
      <ul class="nav pull-right"> 
      <li>{{#link-to 'articles'}}Articles{{/link-to}}</li> 
      <li>{{#link-to 'photos'}}Photos{{/link-to}}</li> 
      <li>{{#link-to 'login'}}Login{{/link-to}}</li> 
      </ul> 
     </div> 
     </div> 
     {{outlet}} 
    </div> 
    {{/if}} 
    {{render 'login' controllers.login.content}} 
</script> 

    <script type="text/x-handlebars" data-template-name="articles"> 
    <h2>Articles</h2> 
    </script> 


    <script type="text/x-handlebars" data-template-name="login"> 
    {{#if isLogin}} 
     <p>You are already logged in!</p> 
    {{else}} 
     <form class="form-inline" {{action login on="submit"}}> 
     <h2>Log In</h2> 
     {{input class="btn" type="submit" value="Log In"}} 
     </form> 
     {{#if errorMessage}} 
     <div class="alert alert-error">{{errorMessage}}</div> 
     {{/if}} 
    {{/if}} 
    </script> 

和JS

App = Ember.Application.create(); 

// Routes 
App.Router.map(function() { 
    this.route('articles'); 
    this.route('photos'); 
    this.route('login'); 
}); 

App.LoginRoute = Ember.Route.extend({ 
    renderTemplate: function() { 
     this.render('login', { 
      into: 'application', 
      outlet: 'login' 
     }); 
    } 
}); 

App.AuthenticatedRoute = Ember.Route.extend({ 

    beforeModel: function (transition) { 
     if (!this.controllerFor('login').get('isLogin')) { 
      this.redirectToLogin(transition); 
     } 
    }, 

    redirectToLogin: function (transition) { 
     alert('You must log in!'); 
     var loginController = this.controllerFor('login'); 
     loginController.set('errorMessage', 'Login first'); 
     this.transitionTo('login'); 
    } 
}); 

App.ApplicationRoute = Ember.Route.extend({ 
    beforeModel: function (transition) { 
     if (!this.controllerFor('login').get('isLogin')) { 
      this.transitionTo('login'); 
     } 
    } 
}); 

App.LoginController = Ember.Controller.extend({ 
    isLogin: false, 
    errorMessage: '', 
    actions: { 
     login: function() { 
      alert("login"); 
      this.set('isLogin', true); 
      this.transitionToRoute('articles'); 
     } 
    } 
}); 

App.ArticlesRoute = App.AuthenticatedRoute.extend({ 
    needs: 'login' 
}); 

App.ApplicationController = Ember.Controller.extend({ 
    needs : 'login' 
}); 

回答

2

這是一個有點難受,現在測試,但我認爲你正在運行到的問題,因爲你達到路由層次。大多數情況下,Ember控制器/路線都可以訪問其父對象的屬性,但不能訪問其子對象的屬性。 (這是有道理的,因爲它是可能的母公司是積極而不是孩子。)

我認爲,而不必在LoginControllerisLogin屬性,把它放在ApplicationController。然後,在你需要它的地方,創建一個別名:

App.ApplicationController = Em.ObjectController.extend({ 
    isLogin: false 
}); 

App.LoginController = Em.ObjectController.extend({ 
    needs: ['application'], 
    isLogin: Em.computed.alias('controllers.application.isLogin') 
}); 

這是繼灰燼更緊密的成語,我認爲會解決你的問題。

+0

謝謝你給這裏面。這很容易計算,但爲了完整起見:您的第二個控制器應該命名爲「LoginController」。 – justastefan

相關問題