javascript - Ember.js 不渲染数据

Question

好吧，我已经为此摸不着头脑有一段时间了。我正在尝试通过 RESTful API 加载一些简单的数据，但无法实际显示数据。我可以看到正在进行正确的 API 调用(正确设置了 auth header )并且正在返回数据，但它从未显示出来。任何帮助将不胜感激。

这是我的 JavaScript:

window.App = Ember.Application.create();

App.Store = DS.Store.extend({
  revision: 13
});
DS.RESTAdapter.reopen({
  namespace: 'api',
  headers: {
    'X_AUTH_TOKEN': user_api_key
  }
});

App.Router = Ember.Router.extend();
App.Router.map(function () {
  this.resource('config_items');
});

App.ConfigItem = DS.Model.extend({
  name: DS.attr('string'),
  value: DS.attr('string')
});

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return App.ConfigItem.find();
  }
});

以及模板(HAML 格式):

%script(type="text/x-handlebars" data-template-name="config_items")
  %ul#config-item-list
    {{#each controller}}
    %li {{name}}: {{value}}
    {{/each}}

以及API调用返回的数据:

{"config_items":[
  {
    "id":6,
    "organization_id":1,
    "name":"test",
    "value":"1234",
    "created_at":"2013-08-24T00:54:07Z",
    "updated_at":"2013-08-24T00:54:07Z"
  },{
    "id":9,
    "organization_id":1,
    "name":"qwer",
    "value":"tyui",
    "created_at":"2013-08-24T01:02:35Z",
    "updated_at":"2013-08-24T01:02:35Z"
  },{
    "id":11,
    "organization_id":1,
    "name":"6666666",
    "value":"gggg",
    "created_at":"2013-08-24T01:02:59Z",
    "updated_at":"2013-08-24T01:02:59Z"
  }
]}

Answer 1

要使您的项目显示出来，您需要对代码进行一些更改。

让我们开始吧，首先删除这一行:

App.Router = Ember.Router.extend();

这不是必需的，因为 ember 已经在您的 App 命名空间中查找名为 Router 的属性。

然后，将您的路由器映射更改为此，添加 {path: '/'}，这将使您的 config_items 模板在访问 '/时直接渲染' 正如我们在 config_items 资源 path 属性中定义的那样。

App.Router.map(function () {
  this.resource('config_items', {path: '/'});
});

最后添加 ConfigItemsRoute，从中调用 model 钩子(Hook) find()

App.ConfigItemsRoute = Ember.Route.extend({
  model: function() {
    return App.ConfigItem.find();
  }
});

最后但并非最不重要的一点是这里有一个演示:http://jsbin.com/odosoy/110/edit

希望有帮助。