javascript - EmberJS 中的 transitionTo LoadingRoute？

Question

是否可以在控制器操作上触发加载路线？
例如：

App.PostsController = Ember.ArrayController.extend(
  actions:  
    new:  
      # transitionTo loading
      $.post(...).then (response) ->
        # deactivate loading
)

我想避免为每个控制器添加自定义的“加载”属性，而只使用内置的 LoadingRoute。

Answer 1

我在应用程序路由上创建了以下两个操作

startLoading: function () {
  this.set('returnRoute', this.controller.get('currentRouteName'));
  this.intermediateTransitionTo('loading');      
},
endLoading: function () {
  this.intermediateTransitionTo(this.get('returnRoute'));     
}

因为转换是中间的，浏览器历史不会受到影响didTransition，willTransition并且不会在路由上触发操作。intermediateTransitionTo是公共 API 的一部分，因此使用起来应该是安全的。

然后我将这些动作用作

someAction: function() {
  var that = this;
  this.send('startLoading');
  longTask().then(function() {
    that.send('endLoading');
  });            
}

Answer 2

当某些路由的钩子返回一个承诺App.LoadingRoute时，Ember 将转换到自动调用的路由。model例如：

App.PeopleRoute = Ember.Route.extend({
  model: function(){
      return fetchPeopleFromServer();
  }
});

因此，如果您声明App.LodingRoute和您的模板 (data-template-name="loading")，您将在页面中插入该模板的内容，而不会解析承诺。完成后，加载模板被删除，当前路线的模板被附加。

有时您希望将加载模板插入页面的某个区域，默认情况下它只是附加到最后。在这种情况下，您可以使用插座并覆盖 renderTemplate 来控制此模板的插入位置。例如：

路线

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

模板

<script type="text/x-handlebars" data-template-name="application">
    <div class="loading">{{outlet "loading"}}</div>
    ...
    {{outlet}}
</script>

您可以像其他声明的路线一样手动转换为LoadingRoute使用。transitionTo('loading')例如，在路由操作中触发的长任务中：

someAction: function() {
    var route = this;
    route.transitionTo('loading');
    longTask().then(function() {
        route.transitionTo('index');
    });            
}

这是一个 jsfiddle 展示了这一点http://jsfiddle.net/marciojunior/JEqmq/