如何使用Bootstrap-3-Typeahead使用embe-data？

Question

我烬版本：

DEBUG: ------------------------------- 
Ember    : 2.11.0 
Ember Data  : 2.11.1 
jQuery   : 3.1.1 
Ember Simple Auth : 1.2.0 
DEBUG: ------------------------------- 

我用ember data之前，我有一个这样的组件：

import Ember from 'ember'; 

export default Ember.TextField.extend({ 
    didInsertElement: function() { 
    var _this = this; 
    this.$().typeahead({ 
     source: function(query, process) { 
     $.getJSON("/api/" + _this.get('modelName'), {query: query, access_type: 'typeahead'}, function(data) { 
      process(data); 
     }); 
     } 
    }) 
    }, 

    willDestroyElement: function() { 
    this.$().typeahead('destroy'); 
    } 
}) 

使用这个组件：

{{typeahead-input type="text" modelName='shipping_spaces' value=shippingSpace class="form-control"}} 

而且随着Bootstrap-3-Typeahead此组件的工作（ https://github.com/bassjobsen/Bootstrap-3-Typeahead）。

但是，当我使用ember-data到我的项目中，我不知道如何使用Bootstrap-3-Typeahead与ember-data一起使用。由于所有数据来自this.store.query('order')，因此不再使用ajax。

所以，如果我必须使用typeahead，我必须设计一个addo？谢谢。

Answer 1

只需更改搜索功能的内容即可。搜索函数具有第二个参数process作为回调函数。从商店收到结果时调用它。

下面是一个例子：

import Ember from 'ember'; 

export default Ember.TextField.extend({ 
    store: Ember.inject.service(), 

    didInsertElement: function() { 
    var _this = this; 
    this.$().typeahead({ 
     source: function(query, process) { 
     this.store.query('order', query).then(function(data){ 
      process(data); 
     }); 
     } 
    }) 
    }, 

    willDestroyElement: function() { 
    this.$().typeahead('destroy'); 
    } 
}) 

备选方案2：

现在你可能认为注射store一个组件是坏的。这取决于！如果这是一个订单查询组件，则可以。但是，如果你真的不想将商店注入组件，只需使用闭包动作。

示例闭合动作：

didInsertElement: function() { 
    var _this = this; 
    this.$().typeahead({ 
    source: function(query, process) { 
     let remoteFunc = this.get('remoteCallFunc'); 
     remoteFunc(query).then(function(data){ 
     process(data); 
     }); 
    } 
    }) 
}, 

和用法是：

{{typeahead-input type="text" remoteCallFunc=(action 'retrieveShippingSpaces') 
    value=shippingSpace class="form-control"}}