エンベロープでブートストラップ-3タイプヘッドを使用するには？

Question

私の燃えさしバージョン：

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と、このコンポーネント作品（

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

私はember dataを使用する前に、私はこのようなコンポーネントを持っていますhttps://github.com/bassjobsen/Bootstrap-3-Typeahead）。

私のプロジェクトにember-dataを使用すると、Bootstrap-3-Typeaheadの使用方法はわかりませんember-dataで動作します。すべてのデータがthis.store.query('order')から届いたため、ajaxは使用しません。

typeaheadを使用する必要がある場合は、addoを設計する必要がありますか？ありがとう。

Answer 1

検索機能の内容を変更するだけです。検索関数には、コールバック関数として第2引数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を注入することは悪いことだと思うことがあります。場合によります！これがオーダークエリーコンポーネントであればOKです。しかし、コンポーネントにストアを挿入したくない場合は、クロージャーアクションを使用してください。閉鎖アクションの

例：

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"}}