ember.js - Ember : handling JSON response from ember-network promise in component

Question

我正在尝试在组件中实现一个简单的自动建议。我正在测试 fastboot，因此正在使用 ember-network 与我的 API 进行通信。我现在没有使用 ember-data。这是否是“ Ember ”的方式是一个不同的问题......我只是想让它发挥作用。

我的组件 JS:

import Ember from 'ember';
import fetch from 'ember-network/fetch';

export default Ember.Component.extend({
    searchText: null,

    loadAutoComplete(query) {
        let suggestCall = 'http://my.api.com/suggest?s=' + query;
        return fetch(suggestCall).then(function(response) {
            return response.json();
        });     
    },

    searchResults: Ember.computed('searchText', function() {
        let searchText = this.get('searchText');
        if (!searchText) { return; }
        let searchRes = this.loadAutoComplete(searchText);
        return searchRes;
    })
});

在模板中:

{{input type="text" value=searchText placeholder="Search..."}}

{{ log "TEMPALTE RESULTS" searchResults }}
{{#each-in searchResults as |result value|}}
<li>{{result}} {{value}}</li>
{{/each-in}}

模板日志指令在我的控制台中输出:



数据在“建议”中，所以我知道获取工作正常。我只是不知道如何去做。我无法遍历“_result”。我需要做什么来解析它并在模板中使用它？

Answer 1

从计算属性返回 promise 不仅简单，而且有点棘手。

选项1。您可以使用ember-concurrency此用例的插件。你可以看看auto complete feature explanation doc

您的组件代码，

import Ember from 'ember';
import { task, timeout } from 'ember-concurrency';

export default Ember.Component.extend({
    searchText: null,

    searchResults: task(function*(str) {
        this.set('searchText', str);
        let url = `http://my.api.com/suggest?s=${str}`;
        let responseData = yield this.get('searchRequest').perform(url);
        return responseData;
    }).restartable(),
    searchRequest: task(function*(url) {
        let requestData;
        try {
            requestData = Ember.$.getJSON(url);
            let result = yield requestData.promise();
            return result;
        } finally {
            requestData.abort();
        }
    }).restartable(),
});

和您的组件 hbs 代码，

<input type="text" value={{searchText}} onkeyup={{perform searchResults value="target.value"  }}>
<div> 
     {{#if searchResults.isIdle}}
        <ul>
            {{#each searchResults.lastSuccessful.value as |data| }}
            <li> {{data}} </li>
            {{else}}
             No result 
            {{/each}}
        </ul>
    {{else}}
        Loading...
    {{/if}} 
</div>

选项 2。您可以返回 DS.PromiseObject 或 DS.PromiseArray

import Ember from 'ember';
import fetch from 'ember-network/fetch';

export default Ember.Component.extend({
    searchText: null,

    loadAutoComplete(query) {
        let suggestCall = 'http://my.api.com/suggest?s=' + query;
        return fetch(suggestCall).then(function(response) {
            return response.json();
        });
    },

    searchResults: Ember.computed('searchText', function() {
        let searchText = this.get('searchText');
        if (!searchText) { return; }
        //if  response.json returns object then you can use DS.PromiseObject, if its an array then you can use DS.PromiseArray        
        return DS.PromiseObject.create({
            promise: this.loadAutoComplete(searchText)
        });
    })
});

引用 Ember 点火器文章- The Guide to Promises in Computed Properties