【问题标题】:Ember: How to get Router and Controller work together?Ember:如何让路由器和控制器一起工作?
【发布时间】:2012-11-04 13:48:17
【问题描述】:

对于我的登录/注销场景,我在 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。谢谢

【问题讨论】:

    标签: ember.js


    【解决方案1】:

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

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

    ...
    {{action log href=true}}
    ...
    
    logIn: function(router, evt) {
      router.get('userController').prepareForLogin()
      router.transitionTo('loggedIn')
    }
    

    【讨论】:

    • 嘿,从控制器转换的 controllers.send("loggedIn") 怎么样?
    • 而不是 'goLoggedIn: Ember.Route.transitionTo('loggedIn'),' 我尝试了 'goLoggedIn: function(router, evt) { router.get('inController').tryLogin() router .transitionTo('loggedIn') },',但它说:'"不能调用未定义的方法'split'"'
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-02-08
    相关资源
    最近更新 更多