何时何地可以从远程API在我的Ember.js应用程序中加载数据？

我正在学习Ember.js，正在编写一个应用程序，我想执行以下任务

从本地存储器加载一些数据

检查第三方API以获取新的附加数据

附加任何附加内容并将整个内容保存回本地存储

显示此数据的表格

我的申请只是一条路线。我正在使用

Ember.Route

的

模型

钩子从本地存储加载数据。但是，哪里是检查第三方API是否有任何新数据的好地方？我是否也应该在

模型中执行此操作？我希望能够在查询第三方API的过程中显示某种加载图标，我不确定
model
hook是否允许我这样做

现在，我的
路线
只包含以下代码

App.HistoryRoute = Ember.Route.extend({

    model: function (params) {

        // initialize model
        var model = { summoner: params, history: [] };

        if (typeof(localStorage.history) == 'undefined')
            return model;

        // fetch the data from local storage
        var history = JSON.parse(localStorage.history);

        // check for existing data
        if (!history.hasOwnKey(params.region) || !history[params.region].hasOwnKey(params.name))
            return model;

        // use the data from local storage
        return history[params.region][params.name];

    }

});

本地存储中的数据使用区域和名称命名。看起来像这样

{
  "NorthAmerica": {
    "ryan": {
      "summoner": { "region": "NorthAmerica", "name": "ryan" },
      "history": [ ... ]
    }
  }
}

因此，
Route
的
model
方法加载该数据，以便将其用作模型。但是，我应该在哪里点击第三方API来获取新数据？我想在每次刷新页面时检查它是否有新数据。谢谢
 model

hook当然是余烬希望您这样放置代码的典型地方。我想创建一个延迟加载/无限滚动机制，最好将代码放在控制器上以检索其他内容。为了便于组织，我最终将调用移动到控制器中，以便将初始数据加载到控制器中。使用

Ember.run.scheduleOnce

，我能够确保加载发生在渲染队列之后：

init: function() {
  //make sure the nested views have rendered before fetching initial data
  Ember.run.scheduleOnce('afterRender', this, this.fetchInitialData);
},

//fetch initial data based on pageSize
fetchInitialData: function() {

  //enable loading animation
  this.set('isLoading', true);

  //get the first page of users
  var self = this;
  $.post("/user/search", {limit: 15})
    .then(function(response) {
      self.set('isLoading', false);
      self.set('total', response.total);
      self.set('model', response.users);
    });
}

---

希望有帮助！：）

modelhook确实是这样做的地方。在完成转换之前，Ember将等待

模型

钩子中返回的

承诺

得到解决。如果您想在页面加载时显示某些内容，HistoryLoadingRoute（或相应的历史记录/加载模板）将完全做到这一点

为了确保Ember在退出加载状态之前等待API调用完成，您需要在模型钩子中返回一个

promise

。您可以为此使用

return$.ajax（…

），或者我更喜欢

return ic\u ajax.request（…

），因为它更适合于余烬测试