ember.js - Ember : How to cleanly replace model data and have progress indicators

Question

我有一个显示项目列表的特定路由，它根据用户是谁从我的 RESTAdapter 获取初始数据。

我现在正在实现一个搜索功能，它将发出一个新的 API 调用，以便用户可以获得除默认记录之外的记录，并且响应应该替换该路由的模型。我有所有这些工作，但我不确定如何做加载或进度指示器(因为来自数据库的响应可能需要 5-10 秒，具体取决于数据量)。我知道加载子状态，但在这种情况下，我不会在路由之间转换。我只想至少有一个微调器，以便用户知道它正在处理某些事情。

之前做过这件事的人是否愿意分享他们如何处理 a) 用新数据替换模型，以及 b) 使用微调器或其他东西让用户了解情况？

当用户单击“搜索”按钮时调用的表单操作

searchProjects: function() {
  var query = this.get('queryString');
  if (query) {
    var _this = this;
    var projects = this.store.find('project', {q: query});
    projects.then(function(){
      _this.set('model', projects);
    });
  }
}

Answer 1

a) replacing the model with new data

你不需要做任何事情。如果您从后端正确加载记录，Ember 将自动在前端更新它们。

b) keeping the user informed with a spinner or something

加载子状态是一个急切的转换。 Ember 还通过 loading 支持延迟转换。事件。

您可以使用该事件来显示微调器。

这是来自 docs 的示例:

App.ApplicationRoute = Ember.Route.extend({
  actions: {
    loading: function(transition, route) {
      showSpinner();

      this.router.one('didTransition', function() {
        hideSpinner();
      });

      return true; // Bubble the loading event
    }
  }
});

UPD1

I need to do at least what I'm doing right? Setting the model to the response?

您需要通过 query params 在 URL 中反射(reflect)搜索。 .这将使路由器自动为您更新模型。

what I would put in showSpinner to affect stuff on the page (like, can I use jQuery to show or hide a spinner element?), or show the actual loading substate.

我会在该页面的 Controller 上设置一个属性:

App.IndexRoute = Ember.Route.extend({
  queryParams: {
    search: {
      refreshModel: true
    }
  },
  model () {
    return new Ember.RSVP.Promise( resolve => setTimeout(resolve, 1000));
  },

  actions: {
    loading (transition, route) {

      this.controller.set('showSpinner', true);

      this.router.one('didTransition', () => {
        this.controller.set('showSpinner', false);
      });

      return true;
    }
  }
});

App.IndexController = Ember.Controller.extend({
  queryParams: ['search'],
  search:      null,
  showSpinner: false,
});

演示: http://emberjs.jsbin.com/poxika/2/edit?html,js,output

或者您可以简单地将微调器放入加载模板中，这将隐藏过时的数据:

http://emberjs.jsbin.com/poxika/3/edit?html,js,output

或者您可以将您的微调器放入加载模板中: