如何使用 Bootstrap-3-Typeahead 处理嵌入数据？

Question

我的ember版本：

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 注入组件是不好的。这取决于！如果这是一个order-querying组件，就可以了。但是如果你真的不想给一个组件注入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"}}

如何使用 Bootstrap-3-Typeahead 处理嵌入数据？

How to use Bootstrap-3-Typeahead work with embe-data?

ember.js

ember-data