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

Question

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

1. 从本地存储加载一些数据
2. 检查第三方API以获取新的附加数据
3. 追加任何附加内容并将整个内容保存回本地存储
4. 显示此数据的表格

我的申请只是一条路线.我使用Ember.Route的model钩加载从本地存储的数据.但是,对于任何新数据,检查第三方API的好地方在哪里？我也应该model挂钩吗？我希望能够在查询第三方API时显示某种加载图标,我不确定该model钩子是否允许我这样做？

现在,我Route只包含以下代码......

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来获取新数据？我想在每次刷新页面时检查它是否有新数据.谢谢!

Answer 1

该model挂钩无疑是灰烬希望你把代码一样，典型的地方。我想创建一个延迟加载/无限滚动机制，放置代码以检索其他内容的最佳位置是控制器。出于组织上的考虑，我最终将调用移到了将我的初始数据也加载到控制器的过程中。使用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);
    });
}

希望有帮助！:)