我正在尝试创建一个调用 API 来查询数据库中数据的 Ember 服务。我想创建这个服务,这样我就可以在各种 Controller 、组件和路由中注入(inject)一个数据集(一组对象)。我不确定这是否是 ember 的“最佳实践”之一,但它似乎可以解决学习框架时的紧迫问题。对于这个例子,我有一个名为“get-data.js”的服务,我有一个名为“responsive-table.js”的组件,我想访问从我的数据库接收到的对象数组。每次我需要这个数组时,我是否应该使用服务向 api 发出 ajax 请求?我应该使用“ember-data”并调用“store”并使用“findAll”方法吗?每当我尝试调用商店并注释掉“findAll”的响应时,我都会得到一个类对象?使用 ember.js 和“ember-data”访问组件和 Controller 中的服务器数据的最佳方式是什么
服务
// service
import Ember from 'ember';
const {
Service, inject: { service }, computed, run, set, get
} = Ember;
export default Service.extend({
ajax: service(),
usingJQueryAjax() {
let data = $.get('/api/data').then(function(result ) {
console.log("right here: ", result );
return result;
});
return data
}
});
组件
// component
import Ember from 'ember';
const {
Component, inject, get, set, $
} = Ember;
export default Component.extend({
store: inject.service(),
actions: {
usingStoreDoesntWork() {
var data = get(this, 'store').findAll('nba');
return data;
},
usingJQueryAjax() {
var data = $.getJSON('/api/data').then(function(result) {
console.log("Array I want to return: ", result );
});
return data;
}
}
});
从 API 获取数据到组件的最佳方法是什么?
最佳答案
Ember 组件被设计为与数据源没有连接。这提高了它们的可重用性,因为必须传入组件使用的所有数据。
通常,您的服务器应用程序和 Ember 模型之间的桥梁是 Route
。在这里,您执行必要的操作以检索数据并将其返回到 model()
Hook 中。无论您是否使用 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()
Hook 返回数据。
希望这能为您澄清。
关于javascript - 从 API 获取 ember 组件中的数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42098832/