如何在JavaScript / Ember.js中通過URL觀察特定的AJAX調用？

Question

我正在嘗試在我的Ember.js應用程序中創建一個加載按鈕組件。 當按鈕檢測到已創建特定的XHR時，應該自動將其禁用，並在XHR完成后重新啟用其本身。 基本上，我希望它跟蹤我提交的特定URL並根據該URL更改狀態。 這是該組件當前的Handlebars文件的外觀：

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

我嘗試在我的Ember應用程序控制器中使用jQuery的.ajaxComplete()方法來完成此操作，但是我無法獲取“ {{loading-button}}”組件來觀察應用程序控制器中的任何屬性。

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

感謝有關如何實現此目標的任何指示。 謝謝。

Answer 1

灰燼的組成理念是數據下降行動 。

我的情況和你相似。 我創建了一個單獨的搜索按鈕組件，如果ajax正在調用，則設置按鈕文本為“搜索”並禁用它，而當ajax完成時，設置按鈕文本為“搜索”並啟用它。

search-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')();
    }
  }
});

搜索按鈕.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')}}