Ember - JSON 导入 - 不显示模板内容

Question

我正在使用 Ember CLI。

我有一个 JSON 这种格式：

public/assets/data.json

{
  "important": [
    {
      "name": "first",
      "value": 10
    },
    {
      "name": "second",
      "value": 10
    },
    ...
  ],
  "unimportant1": {
    ...
  },
  "unimportant2": {
    ...
  }
  ...
}

我想导入 "important" 以便在模型中使用。我尝试了以下操作：

app/routes/important.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return Ember.$.getJSON("/assets/data.json").important;
  }
});

控制台日志没有显示任何错误。

我想显示 "important" 中的项目。我尝试了以下操作：

app/templates/important.hbs

{{#each model as |important|}}
  <div>
    {{important.name}}{{important.value}}
  </div>
{{/each}}

但是，没有显示任何内容。我怎样才能让它们显示出来？

我注意到如果我将数组复制并粘贴到 return 语句中，项目会按预期显示：

app/routes/important.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return [
      {
        "name": "first",
        "value": 10
      },
      {
        "name": "second",
        "value": 10
      },
      ...
    ];
  }
});

非常感谢任何帮助。

Answer 1

Ember.$.getJSON("/assets/data.json"); return 是承诺，但 Ember.$.getJSON("/assets/data.json").important; 不是 return 承诺。这只是一个 undefined.

在你的模型挂钩中，只是 return 承诺：

model() {
  return Ember.$.getJSON("/assets/data.json");
}

然后在您的模板中，像这样使用它：

{{#each model.important as |important|}}
  <div>
    {{important.name}}{{important.value}}
  </div>
{{/each}}

Ember - JSON 导入 - 不显示模板内容

Ember - JSON import - not displaying template content

javascript

json

ember.js

ember-cli