Ember：处理组件中来自 ember-network Promise 的 JSON 响应

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

我的组件 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”。我需要做什么来解析它并在模板中使用它？

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

选项1。您可以使用Ember并发 https://github.com/machty/ember-concurrency此用例的插件。你可以看看自动完成功能说明文档 http://ember-concurrency.com/#/docs/examples/autocomplete

您的组件代码，

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)
        });
    })
});

参考余烬点火器文章-计算属性中的 Promise 指南 https://emberigniter.com/guide-promises-computed-properties/