es6 extending View

[Aleksandar Djindjic]

I've just tried to extend my View using es6 but something went wrong?

export class ColumnView extends View {
  constructor() {
    let background = new Surface({
      properties: {
        backgroundColor: 'gray',
      },
    });

    let backModifier = new StateModifier({
      transform: Transform.behind
    });

    let scaleModifier = new Modifier({
        size: [undefined, undefined],
        proportions: [0.1, 0.4],
    });

    this.add(backModifier).add(scaleModifier).add(background);
  }
}

I'm getting an error in View.js:

View.prototype.add = function add() {
  return this._node.add.apply(this._node, arguments);
};

Cannot read property 'add' of undefined

[Alexander Gugel]

You need to invoke the super constructor (View) within your constructor using super(...)

[Aleksandar Djindjic]

thanks @alexanderGugel, that's it!
One more question, do I also need to put ColumnView.DEFAULT_OPTIONS = {}; in my constructor after calling super()?

[Alexander Gugel]

If your transpiler (e.g. Babel) supports static properties, set it as a static property. Otherwise, simply do ColumnView.DEFAULT_OPTIONS = {}; after you defined your class. Not in the constructor.

Example:

export class ColumnView extends View {
  constructor() {
    let background = new Surface({
      properties: {
        backgroundColor: 'gray',
      },
    });

    let backModifier = new StateModifier({
      transform: Transform.behind
    });

    let scaleModifier = new Modifier({
        size: [undefined, undefined],
        proportions: [0.1, 0.4],
    });

    this.add(backModifier).add(scaleModifier).add(background);
  }
  static DEFAULT_OPTIONS = {}
}

or

export class ColumnView extends View {
  constructor() {
    let background = new Surface({
      properties: {
        backgroundColor: 'gray',
      },
    });

    let backModifier = new StateModifier({
      transform: Transform.behind
    });

    let scaleModifier = new Modifier({
        size: [undefined, undefined],
        proportions: [0.1, 0.4],
    });

    this.add(backModifier).add(scaleModifier).add(background);
  }
}

ColumnView.DEFAULT_OPTIONS = {};v

[Aleksandar Djindjic]

thanks @alexanderGugel