如何为“扩展”提供动态值?(或“在这种情况下如何扩展工作”?)

gla*_*con 1 javascript inheritance prototypal-inheritance ember.js ecmascript-6

我正在看一个class这个)。在它DOCO建议你可以extend在类更改类的属性。是的,它对我有用。

但是,我要做的是动态提供设置的值。

我有两个问题。

第一

如何修改演示,以便可以动态提供使用的值。

第二

我意识到当我看课时,这似乎是代码的重要部分……

  ajax (url, data = {}, method = this.method) {
    const ajaxSettings = assign(
      {},
      {
        contentType: false,
        processData: false,
        xhr: () => {
          const xhr = $.ajaxSettings.xhr();
          xhr.upload.onprogress = (event) => {
            this.didProgress(event);
          };
          this.one('isAborting', () => xhr.abort());
          return xhr;
        },
        url,
        data,
        method
      },
      get(this, 'ajaxSettings')
    );

    return this.ajaxPromise(ajaxSettings);
  },

Run Code Online (Sandbox Code Playgroud)

...我不确定我是否理解“扩展”是如何进行的。ajaxSettingsajax函数中使用,那么函数中的作用域又如何extend将扩展中提供的值合并到函数中的硬编码值中?

希望这个问题有道理...如果您不写书就无法管理“第二”,我会很乐意为“第一”提供一个答案;-)


回应评论

ste*_*ger 5

  1. ajaxSettings如果您想动态设置它,看起来您可以简单地创建一个计算属性:
import Uploader from 'ember-uploader/uploaders/uploader';
import { computed } from '@ember/object';

export default Uploader.extend({
  ajaxSettings: computed('someProperty', function() {
    // do your logic to set the options dynamically in here
    return {
      headers: {
        'X-Application-Name': 'Uploader Test'
      }
    };
  })
});
Run Code Online (Sandbox Code Playgroud)
  1. 确实是ajaxSettings使用该属性的地方,而代码的关键是这一行:
get(this, 'ajaxSettings')
Run Code Online (Sandbox Code Playgroud)

它将ajaxSettings从类中检索属性(因此,如果ajaxSettings在基类上进行了设置,则您的子类将覆盖基类设置- 有关扩展的更多信息,请参见此处)。

该行与Object.assign()(技术上是Ember的polyfill)一起使用以构建选项。这部分提供一些默认值:

{
  contentType: false,
  processData: false,
  xhr: () => {
    const xhr = $.ajaxSettings.xhr();
    xhr.upload.onprogress = (event) => {
      this.didProgress(event);
    };
    this.one('isAborting', () => xhr.abort());
      return xhr;
    },
    url,
    data,
    method
  }
}
Run Code Online (Sandbox Code Playgroud)

但是由于检索ajaxSettings是在默认值之后进行的,因此在您的类的ajaxSettings对象中指定的与上述默认值重叠的任何属性都将具有优先权并覆盖它们。

因此,如果您contentType在类中定义ajaxSettings如下:

ajaxSettings: computed('someProperty', function() {
  return {
    contentType: true, // (or some other value besides false)
    ...
  };
})
Run Code Online (Sandbox Code Playgroud)

这将与contentType: false上面的默认值中指定的值重叠,并且由于它将在默认值assign()之后进行合并,因此将具有优先权。