Question

我在Ember的子组件中使用Twitter Typeahead.js，我提供了一个dataSource函数（见下文）。此dataSource函数查询远程服务器。这个问题我想在Ember中进行辩解，这似乎不起作用。

这与runloop有关吗？我应该包装什么？

import Ember from 'ember';

export default Ember.Component.extend({

    dataResponse: [],
    dataSource: function () {
        var component = this;

        // function given to typeahead.js
        return function (query, cb) {

            var requestFunc = function () {
                var encQuery = encodeURIComponent(query);
                Ember.$.getJSON('/api/autocompletion?prefix=' + encQuery).then(function (result) {
                    // save results
                    component.set('dataResponse', result.autocompletion);
                    // map results
                    var mappedResult = Ember.$.map(result.autocompletion, function (item) {
                        return { value: item };
                    });
                    cb(mappedResult);
                });
            };

            // this is not debounced, why? :|
            Ember.run.debounce(this, requestFunc, 500); // debounce by 500ms  
        };
    }.property()

});

注意：我不使用Bloodhound和Typeahead.js，因为我需要访问结果。一开始，自定义解决方案似乎更容易。

Answer 1

去抖动的工作原理是根据上下文/函数创建唯一键。当你随后调用它时，它会将现有的键与传入的上下文/功能键进行比较。每次调用去抖时，你都会传入一个不同的函数，这就是为什么它不能正常工作的原因。

Answer 2

接受@ Kingpin2k的建议我重构了这样的代码：

import Ember from 'ember';

export default Ember.Component.extend({

    dataResponse: [],
    dataSource: function () {
        var component = this;

        var queryString = null;
        var callBack = null;
        var requestFunc = function () {
            var encQuery = encodeURIComponent(queryString);
            Ember.$.getJSON('/api/autocompletion?prefix=' + encQuery).then(function (result) {
                // save results
                component.set('dataResponse', result.autocompletion);
                var mappedResult = Ember.$.map(result.autocompletion, function (item) {
                    return { value: item };
                });
                callBack(mappedResult);
            });
        };

        // function used for typeahead
        return function (q, cb) {
            queryString = q;
            callBack = cb;
            Ember.run.debounce(this, requestFunc, 500); // debounce by 500ms
        };
    }.property()

});

Ember.run.debounce不会去抖动

2 个答案: