Question

我创建了一个小jsfiddle，使用ember 1.5和把手1.3不会执行登录权限。登录控制器拥有一个属性＆＃34; isLogin＆＃34;设置为true。但是为什么之后没有其他路线和模板注意到这种变化？

    <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'
});

Answer 1

我现在测试起来有点困难，但我认为你遇到了问题，因为你正在 down 路由层次结构。在大多数情况下，允许Ember控制器/路由访问其父对象的属性，但不允许访问其子对象。（这是有道理的，因为父母可能是活跃的而不是孩子。）

我认为isLogin中没有LoginController属性，而是将其放在ApplicationController中。然后，在您需要它的位置，创建一个别名：

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

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

这更符合Ember惯用语，我认为这将解决你的问题。

Ember控制器似乎在模板和路由中创建了多个实例？

1 个答案: