如何在JavaScript / Ember.js中通过URL观察特定的AJAX调用

How do I observe a specific AJAX call by URL in JavaScript / Ember.js?

本文关键字：观察 URL 调用 AJAX JavaScript Ember js      更新时间：2023-09-26

我试图在Ember.js应用程序中创建一个加载按钮组件。该按钮应该在检测到创建了特定的XHR时自动禁用，并在完成XHR时重新启用自己。基本上，我希望它跟踪我提交的特定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);
    });
}

感谢任何关于我如何做到这一点的建议。谢谢。

Ember组件的理念是DATA DOWN ACTIONS UP

我的情况和你的相似。我创建了一个单独的搜索按钮组件，如果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')();
    }
  }
});

search-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')}}
相关文章：