Question

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

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

我想避免添加自定义＆＃39; loading＆＃39;每个控制器的属性，只需使用内置的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为part of the public 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 =＆＃34; loading＆＃34;），您将获得插入页面中的该模板的内容，而承诺不是＆＃ 39;解决了。完成后，将删除加载模板，并附加当前路径的模板。

有时您希望将加载模板插入到页面的某个区域，默认情况下它只是附加在最后。在这种情况下，您可以使用插座并覆盖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/

中显示了这一点

转换到EmberJS中的LoadingRoute？

2 个答案: