Ember:如何让路由器和控制器协同工作?

时间:2012-11-04 13:48:17

标签: ember.js

对于我的登录/注销场景,我在ember中实现了条件路由:

 App.Router = Ember.Router.extend({

    //needs controller handling
    //goLoggedIn: Ember.Route.transitionTo('loggedIn'),
    goLoggedOut: Ember.Route.transitionTo('loggedOut'),

    root: Ember.Route.extend({
      index: Ember.Route.extend({
        route: '/',
          enter: function(router) {
              var logged = getLoginState();
              Ember.run.next(function() {
                  if (logged) {
                      router.transitionTo('loggedIn');
                  } else {
                      router.transitionTo('loggedOut');
                  }
              });
          }
      }),

      loggedIn: Ember.Route.extend({
        connectOutlets: function(router, context){
          ...
        }
      }),

      loggedOut: Ember.Route.extend({
        connectOutlets: function(router, context){
          ...
        }
      })
      ...

我的index.html说登录视图

    <!-- Template for out -->
    <script type="text/x-handlebars" data-template-name="out">
      <hr /><br />
      <h1>Logged Out</h1>
      <span>Login with "test/test"</span><br /><br />
      <label>Username: </label>{{view Ember.TextField valueBinding="App.OutController.username"}}<br />
      <label>Password: </label>{{view Ember.TextField valueBinding="App.OutController.password" type="password"}}<br />

      {{#if App.loginController.isError}}
        <span class="login-error">Error: Invalid username or password.</span><br />
      {{/if}}

      <br /><button {{action goLoggedIn href=true}}>Login</button>
    </script>

现在我将这个动作简单地委托给我的路由器。我知道我可以将它委托给我的控制器:

 action login target="controller"

但之后,如何在我的路由器中执行transitionTo功能?因为我知道这不应该在我的控制器中完成。那么如何将它传递给我的路由器?

可能我错了,我必须让{{action goLoggedIn href=true}}。然后我的路由器将一个函数委托给我的控制器,我得到一个响应。而不是goLoggedIn: Ember.Route.transitionTo('loggedIn')我需要像App.LoginController.doLogin和之后goLoggedIn: Ember.Route.transitionTo('loggedIn')这样的东西。在这种情况下如何实现它?

修改

喜欢这个吗?

 App.Router = Ember.Router.extend({

    //needs controller handling
    goLoggedIn: Ember.Route.transitionTo('loggedIn'),
    goLoggedOut: Ember.Route.transitionTo('loggedOut'),

    root: Ember.Route.extend({
      index: Ember.Route.extend({
        route: '/',
          enter: function(router) {
              var logged = getLoginState();
              Ember.run.next(function() {
                  if (logged) {
                      router.transitionTo('loggedIn');
                  } else {
                      router.transitionTo('loggedOut');
                  }
              });
          }
      }),

      loggedIn: Ember.Route.extend({
        connectOutlets: function(router, context){
          ...
        }
      }),

      loggedOut: Ember.Route.extend({
        connectOutlets: function(router, context){
          ...
        },
        goLoggedIn: function(router, evt) {
          router.get('inController').tryLogin()
          router.transitionTo('loggedIn')
        }
      })
      ...

我得到:Cannot call method 'split' of undefined

编辑2:

现在正在运作。我不得不删除href=true。感谢

1 个答案:

答案 0 :(得分:7)

在典型的Ember应用程序中,每个控制器的target属性都设置为Router实例。如果要将操作发送到控制器然后再发送到路由器,则可以通过说this.get('target').send('goLoggedIn', optionalEvt)

在控制器方法中执行此操作

我建议您直接将操作发送到路由器。您可以让一个函数处理在转换之前可以在一个或多个控制器上调用方法的操作。 e.g:

...
{{action log href=true}}
...

logIn: function(router, evt) {
  router.get('userController').prepareForLogin()
  router.transitionTo('loggedIn')
}