Question

我不确定为什么返回没有传递给组件模板。它正在倾听并且找到了价值，但它无法正常工作。

return result.resources;当result.resoures有一个对象数组时，不会返回数据。

这是自动完成模板auto-complete.hbs

    <ul>
        <li class='row input-group-lg'>
            {{input type="text" value=searchText placeholder="Enter Street Address" class='col-md-6 col-md-offset-3 col-xs-12 street-address'}}
        </li>


    </ul>
    <ul>
        {{#each searchResults}}
            <li>{{this.name}}</li>
        {{/each}}
    </ul>

这里是auto-complete.js

import Ember from 'ember';

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

        searchResults: function() {
            var searchText = this.get('searchText');
            if(!searchText) {
                return;
            }
            Ember.$.ajax({
                url: "http://dev.virtualearth.net/REST/v1/Locations",
                dataType: "jsonp",
                data: {
                    key: "",
                    q: searchText
                },
                jsonp: "jsonp"
            }).then(function(data) {
                var result = data.resourceSets[0];
                if (result) {
                    if (result.estimatedTotal > 0) {
                        return result.resources;
                    }
                }
            });
        }.property('searchText')
});

Answer 1

代码块

.then(function(data) {
            var result = data.resourceSets[0];
            if (result) {
                if (result.estimatedTotal > 0) {
                    return result.resources;
                }
            }

将从promise返回，并且不会返回计算属性的值，这显然意味着您没有为CP返回任何内容。

可能的解决方法是

searchResults: function() {
        var searchText = this.get('searchText');
        var searchResults = Ember.ArrayProxy.create();
        if(!searchText) {
            return;
        }
        Ember.$.ajax({
            url: "http://dev.virtualearth.net/REST/v1/Locations",
            dataType: "jsonp",
            data: {
                key: "",
                q: searchText
            },
            jsonp: "jsonp"
        }).then(function(data) {
            var result = data.resourceSets[0];
            if (result) {
                if (result.estimatedTotal > 0) {
                    searchResults.set('content',result.resources);
                }
            }
        });
        return searchResults;
    }.property('searchText')

您可以创建一个arrayproxy并返回CP的arrayproxy。完成承诺后，将结果作为内容设置到arrayproxy，这将更新模板。

自定义自动完成组件Ember Cli无法正常工作

1 个答案: