JavaScript/Ember.jsで特定のAJAX呼び出しをURLで観察するにはどうすればよいですか？

Question

Ember.jsアプリケーションでロードボタンコンポーネントを作成しようとしています。ボタンは、特定のXHRが作成されたことを検出すると自動的に無効になり、XHRが完了したときに再び有効になります。基本的には、私が提出した特定のURLを追跡し、それに基づいて状態を変更する必要があります。これは、コンポーネントとどのように見えるか、私のハンドルは、現在のファイルです：

{{loading-button trackMethod="POST" trackURL="/addItem" value="Add Item"}} 

私は私のエンバーアプリケーションのコントローラでは、この使用してjQueryの.ajaxComplete()方法を達成しようとしたが、私は、 `{{読み込みボタン}}」コンポーネントを取得することはできませんアプリケーションコントローラ内のプロパティを観察する。

init: function() { 
    let self = this; 
    // Observe all XHRs 
    $(document).ajaxComplete(function(event, xhr, settings) { 
     self.set('ajaxCompleteUrl', settings.url); 
    }); 
} 

どのように私がこれを達成することができるかについての指摘をお待ちしています。ありがとう。

Answer 1

エンベロ成分の哲学はDATA DOWN ACTIONS UPです。

私のシナリオはあなたのものと似ています。別の検索ボタンコンポーネントを作成しました.AJAXが呼び出し中の場合は、ボタンテキストを「検索」して無効にします.AJAXの完了ボタンテキストは「検索」で有効にします。

検索button.js

import Ember from 'ember'; 

export default Ember.Component.extend({ 

    classNames: ['col-sm-1', 'pull-right'], 

    onHit: null, 
    isSearching: false, 
    canNotSearch: false, 

    actions: { 
    hit() { 
     this.get('onHit')(); 
    } 
    } 
}); 

検索button.hbs

<button type="button" class="btn btn-primary" {{action 'hit'}} disabled={{canNotSearch}}> 
    <span class="glyphicon glyphicon-search"></span> 
    {{#if isSearching}} 
    {{t 'label.common.btn.searching'}} 
    {{else}} 
    {{t 'label.common.btn.search'}} 
    {{/if}} 
</button> 

XXX-controller.js

export default Ember.Controller.extend({ 

    searchObserver: Ember.observer('isSearching', function() { 
    Ember.run.later(() => { 
     this.set('canNotSearch', this.get('isSearching')); 
    }, 100); 
    }), 

    actions: { 

    search() { 
     this.set('isSearching', true); 
     Ember.run.later(() => { 
     // do some ajax call(must return a promise) 
     this.doSearch().then(() => { 
      this.set('isSearching', false); 
     }); 
     }, 200); 
    } 
    } 
} 

ので、あなたはどのであなたのsearch-buttonコンポーネントを使用することができますテンプレート。

{{button-search canNotSearch=canNotSearch isSearching=isSearching onHit=(action 'search')}}