javascript - 从 API 获取 ember 组件中的数据

Question

我正在尝试创建一个调用 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 获取数据到组件的最佳方法是什么？

Answer 1

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 返回数据。

希望这能为您澄清。