如何在我的控制器中访问 JSON 文件

Question

在我的 Ember 应用程序中，我的 public 目录中有一个包含数据的 JSON 文件（即 public/data/articles.json.

我有一个文章路径，我想在其中加载此数据并将其显示在前端。我怎么能成功地做到这一点？我愿意使用模型挂钩，但我不知道现成的解决方案。

目前我的控制器中有以下代码。但是，这不起作用（很可能是因为数据是在呈现后加载的）。

import Controller from '@ember/controller';
import $ from 'jquery';

export default Controller.extend({
  init() {
    this._super(...arguments);
    $.getJSON("/data/articles.json", function (data) {
      console.log("test");
      console.log(data);
      this.articleData = data;
  }
})

Answer 1

您是否在其他地方访问该文件？我建议将文件放入 app 文件夹并导入。它可能位于 app/utils/sample-articles.js 或 "static data" 的另一个文件夹中。这样你就不必做那个额外的请求了。

// app/utils/sample-articles.js
export default {
  // Articles
};

然后在你的控制器中你可以import它像：

import Controller from '@ember/controller';
import sampleArticles from 'your-app/utils/sample-articles';

export default Controller.extend({
  articleData: sampleArticles
});

同样在您的示例中，您将 data 的值分配给内部范围内的变量。您需要像这样重构：

import Controller from '@ember/controller';
import { set } from '@ember/object';
import $ from 'jquery';

export default Controller.extend({
  init() {
    this._super(...arguments);
    $.getJSON("/data/articles.json", (data) => {
      console.log("test");
      console.log(data);
      set(this, "articleData", data); // Use `set`
  }
});

Answer 2

您可以直接在路由 model 挂钩中写入 return $.getJSON("/data/articles.json");，然后在 template/controller.

中以 model 访问数据

更优雅一点的是使用 fetch:

async model() {
  const res = await fetch('/data/articles.json');
  return res.json();
}

如何在我的控制器中访问 JSON 文件

How to access a JSON file in my controller

ember.js