在嵌套路由层次结构中加载路由

Question

我正在使用 Ember 开发移动应用程序。我想让用户体验尽可能好，并尝试考虑到移动设备上的连接并不总是那么好，这就是为什么我想使用带有加载微调器的加载路线。不幸的是，在一种情况下，它的行为并不像我预期的那样：

在我的嵌套路由设置中：

UserRoute:
   UserIndexRoute (=Profile)
   UserFriendsRoute

在 UserRoute 我只加载用户的一个小版本（=不同的模型）。在 95% 的情况下，当我想在那里导航时，该模型已经加载。在子路由中（例如 UserIndexRoute 和 UserFriendsRoute 我只需要完整用户。

我想要实现的是在导航到例如时直接呈现带有模板的 UserRoute UserIndexRoute，然后在索引部分的出口中，我希望渲染 UserLoadingView。但是渲染总是等待所有的 Promise 被解决，并且永远不会显示 UserLoadingView。

如何强制 Ember 渲染用户路由，然后在插座中渲染 UserLoadingView，直到解决 UserIndexRoute 模型？

我是如何实现的：

afterModel: function(model, transition){
    var _this = this,
        params = Ember.get(transition, 'params.user');
    this.get('store').find('user', params.user_id).then(function(user){
        _this.transitionTo('user.profile', user);
    });
}

Answer 1

不要使用索引路由来获取完整的模型，只是将其用作重定向的一种手段。

做这样的事情：

UserRoute:
   UserIndexRoute
   UserFooIndexRoute (=Profile) (Naming is up to you)
   UserFriendsRoute

然后连接您的索引路由以获取完整模型并在完成获取模型后转换到 FooIndex，这取决于它是具有动态段的路由 (:id)。

App.UserIndexRoute = Em.Route.extend({
  redirect: function(){
    var self = this;
    fetchTheFullModel.then(function(model){
      self.transitionTo('user.fooIndex', model); 
    }
  }
});

如果不是这样，您可以在过渡和页面完成渲染后过渡到另一条路线。

App.UserIndexRoute = Em.Route.extend({
  redirect: function(model, transition) {
    var self = this;
    transition.then(function(){
      Ember.run.scheduleOnce('afterRender', function(){
        self.transitionTo('user.fooIndex');
      });  
    });
  }
});

http://emberjs.jsbin.com/zohav/1/edit

您可以在此处阅读有关过渡承诺和 afterRender 的更多信息Ember transition & rendering complete event