从 API 获取 ember 组件中的数据

Question

I\xe2\x80\x99m 尝试创建一个 Ember 服务，该服务调用 API 来查询数据库中的数据。我想创建此服务，以便我可以在各种控制器、组件和路由中注入数据集（对象数组）。我\xe2\x80\x99m不确定这是否是ember\xe2\x80\x99s\xe2\x80\x98最佳实践\xe2\x80\x99之一，但它似乎会在学习框架时解决一个直接问题。对于这个示例，我有一个名为 \xe2\x80\x98get-data.js\xe2\x80\x99 的服务，并且我有一个名为 \xe2\x80\x98responsive-table.js\xe2\x80\x99 的组件，我想要可以访问我从数据库收到的对象数组。每次我需要这个数组时，我是否应该使用服务向 api 发出 ajax 请求？我应该使用 \xe2\x80\x98ember-data\xe2\x80\x99 并调用 \xe2\x80\x98store\xe2\x80\x99 并使用 \xe2\x80\x98findAll\xe2\x80\x99 方法？每当我尝试调用商店并注释掉 \xe2\x80\x98findAll\xe2\x80\x99 的响应时，我都会得到一个类对象？使用 ember.js 和 \xe2\x80\x98ember-data\xe2\x80\x99 访问组件和控制器中的服务器数据的最佳方法是什么

\n\n

服务

\n\n

// service \n\nimport Ember from \'ember\';\n\nconst {\n  Service, inject: { service }, computed, run, set, get\n} = Ember;\n\nexport default Service.extend({\n    ajax: service(),\n\n    usingJQueryAjax() {\n        let data = $.get(\'/api/data\').then(function(result ) {\n            console.log("right here: ", result );\n            return result;\n        });\n\n        return data\n    }\n\n});\n

\n\n

组件

\n\n

// component \n\nimport Ember from \'ember\';\n\nconst {\n  Component, inject, get, set, $\n} = Ember;\n\nexport default Component.extend({\n    store: inject.service(),\n\n    actions: {\n        usingStoreDoesntWork() {\n            var data = get(this, \'store\').findAll(\'nba\');\n            return data; \n        },\n\n        usingJQueryAjax() {\n            var data = $.getJSON(\'/api/data\').then(function(result) {\n                console.log("Array I want to return: ", result );\n            });\n            return data;\n        }\n    }\n});\n

\n\n

从 API 将数据输入组件的最佳方法是什么？

\n

Answer 1

Ember 组件被设计为与数据源没有连接。这增加了它们的可重用性，因为组件使用的所有数据都必须传入。

通常，服务器应用程序和 Ember 模型之间的桥梁是Route. 在这里，您执行必要的操作来检索数据并将其返回到挂钩中model()。无论您是否使用Ember Data都是如此。

您的路线（在 中配置router.js）将在必要时被调用以获取模型。您的模板将可以通过变量访问它model。然后，您可以在模板中包含一个组件，并通过属性将数据传递到模型。

路线

model() {
  // retrieve data here, using whatever technique you want.  It could be 
  // constant data or retrieved via jQuery, or the Ember Data mechanism (e.g.
  // the "store"
  return {
    someList: [1,2,3,4,5]
  };
}

模板

Here's your data:
{{list-display list=model.someList}}

组件模板

<ul>
  {{#each list as |item|}}
    <li>{{item}}</li>
  {{/each}}
</ul>

该组件list-display现在可以显示任何列表，因此它可以很好地重用。与数据的连接是在路由模板中进行的，并且数据由Route. 如果要创建一个Service检索数据，则使用 中的服务Route从钩子返回数据model()。

希望这能为您澄清。