Ember：在组件中处理来自ember-network promise的JSON响应 [英] Ember: handling JSON response from ember-network promise in component

问题描述

我正在尝试在组件中实现一个简单的自动提示。我正在测试fastboot，因此我正在使用ember-network与我的API进行通信。我现在没有使用ember数据。这是否是ember的做法是一个不同的问题...我只是想让这个工作。

I'm trying to implement a simple autosuggest in a component. I'm testing fastboot and therefore am using ember-network to communicate with my API. I'm not using ember-data right now. Whether or not this is the "ember" way to do it is a different question...I'm just trying to get this to work.

我的组件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}}

模板日志指令正在我的控制台：

The template log directive is outputting this in my console:

数据在建议中，所以我知道抓取正在工作。我不知道如何得到它。我不能循环'_result'。我需要做些什么来解析它，并在模板中使用它？

The data is in "suggestions", so I know the fetch is working. I just can't figure out how to get at it. I can't loop over '_result'. What do I need to do to parse this and use it in a template?

推荐答案

从计算属性返回承诺不仅仅是直向前，有点棘手。

Returning promise from computed property is not just straight forward, it's little tricky.

Option1。您可以为此用例使用 ember-concurrency 插件。您可以查看自动完成功能说明文档

Option1. You can use ember-concurrency addon for this use case. You can look at 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>

Option2。您可以返回DS.PromiseObject或DS.PromiseArray

Option2. You can return DS.PromiseObject or 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点火器文章 - 计算属性中的承诺指南

Reference ember igniter article- The Guide to Promises in Computed Properties

这篇关于Ember：在组件中处理来自ember-network promise的JSON响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！