Question

我正在尝试创建一个Ember服务，该服务调用API来查询数据库中的数据。我想创建这个服务，所以我可以在各种控制器，组件和路由中注入一个数据集（一个对象数组）。我不确定这是否是ember的“最佳实践”之一，但似乎它将在学习框架时解决一个直接的问题。对于这个例子，我有一个名为'get-data.js'的服务，我有一个名为'responsive-table.js'的组件，我希望能够访问我从数据库收到的一组对象。每次我需要这个数组时，我是否应该使用服务向api发出ajax请求？我应该使用'ember-data'并调用'store'并使用'findAll'方法吗？每当我尝试调用商店并注释掉'findAll'的响应时，我会得到一个类对象？什么是使用ember.js和'ember-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;
        }
    }
});

及部件

var accessToken = MY_ACCESS_TOKEN;
var baseUrl = "https://api.api.ai/v1/";
var apiResponse;


function send() {
            var text = "pizza with hot sauce and thin crust";
            $.ajax({
                type: "POST",
                url: baseUrl + "query?v=20150910",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                headers: {
                    "Authorization": "Bearer " + accessToken
                },data: JSON.stringify({
                    query: text,
                    lang: "en",
                    sessionId: "<any random string>"
                }),
        success: function(data) {
                    apiResponse = (JSON.stringify(data["result"]["fulfillment"]["speech"],null, 2));
          console.log(apiResponse)
                },
                error: function() {
                    console.log("Internal Server Error");
                }
      })}
send()

从API获取数据到组件的最佳方法是什么？

Answer 1

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

通常，服务器应用程序和Ember模型的桥接器为Route。在这里，您可以执行检索数据所需的操作并将其返回到model()挂钩中。无论您是否使用 Ember数据，都是如此。

在获取模型时，将调用您的路线（在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()挂钩返回数据。

希望这能为你澄清。

从API获取ember组件中的数据

1 个答案:

路线

模板

组件模板