Как использовать работу 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"}}