從API獲取ember組件中的數據

Question

我正在嘗試創建一個Ember服務，該服務調用API來查詢數據庫中的數據。 我想創建這個服務，所以我可以在各種控制器，組件和路由中注入一個數據集（一個對象數組）。 我不確定這是否是ember的“最佳實踐”之一，但似乎它將在學習框架時解決一個直接的問題。 對於這個例子，我有一個名為'get-data.js'的服務，我有一個名為'responsive-table.js'的組件，我希望能夠訪問我從數據庫收到的一組對象。 每次我需要這個數組時，我是否應該使用服務向api發出ajax請求？ 我應該使用'ember-data'並調用'store'並使用'findAll'方法嗎？ 每當我嘗試調用商店並注釋掉'findAll'的響應時，我會得到一個類對象？ 什么是使用ember.js和'ember-data'訪問組件和控制器中的服務器數據的最佳方式

服務

// 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()鈎子中。 無論您是否使用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()掛鈎返回數據。

希望這能為你澄清一下。