ember.js – Ember：如何干净地替换模型数据并拥有进度指标

2023年12月24日 330次阅读

我有一个显示项目列表的路径,它根据用户的身份从我的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);
    });
  }
}

最佳答案

a) replacing the model with new data

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

b) keeping the user informed with a spinner or something

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

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

这是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中反映搜索.这将让路由器自动为您更新模型.

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.

我会在该页面的控制器上设置一个属性：

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

或者你可以将你的微调器放入加载模板：

点赞