Recommended way to extend mvc.View

[vaclavHala]

Introduction

Hello,

while reading the tutorial and looking at all the examples I found so far I see use of the custom .extend() method. Documentation of that method, however, tells me to use TypeScript's extend instead. Maybe I misunderstand, but when I tried to e.g. write this

class PortHandle extends mvc.View<undefined, SVGElement> {
  tagName = "circle"

instead of

const PortHandle = mvc.View.extend({
  tagName: "circle",

the property is not yet set by the time the code that reads it (_ensureElement in View.mjs) so the value I set has no effect.

I tried various other syntaxes like

class PortHandle extends mvc.View<undefined, SVGElement> {
  static tagName = "circle"

or

class PortHandle extends mvc.View<undefined, SVGElement> {
  constructor(){
    this.tagName = "circle"    
  }

but with no success. The only way I managed a class like this to work is

class PortHandle extends mvc.View<undefined, SVGElement> {
  // ...
}

Object.assign(PortHandle.prototype, {
  tagName: "circle",
})

Which ensures the property is present in the prototype chain before any instance is created. I can't help but think this is not the intended way to do things, so what am I missing please?

Thanks

Steps to reproduce

No response

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS, JointJS+

[kumilingus]

Hi, use preinitialize() — that's the hook for exactly this case:

class PortHandle extends mvc.View<undefined, SVGElement> {
    preinitialize() {
        this.tagName = 'circle';
        this.svgElement = true;
    }

    // the rest as regular class members
}

Same applies to any property read while the element is being created: className, attributes, style, id, events, and svgElement (without the latter your circle ends up in the XHTML namespace instead of SVG, and this.vel is never set up). Everything read later (children, DETACHABLE, UPDATE_PRIORITY, your own state and methods) is fine as a normal class field.

mvc.View inherits Backbone's constructor contract, and preinitialize was added in Backbone 1.4.0 for this exact reason — the background is here: jashkenas/backbone#3560 (and https://backbonejs.org/#View-preinitialize).

Your Object.assign(PortHandle.prototype, ...) workaround is valid too, it's basically what .extend() does internally — just less discoverable.

[vaclavHala]

Thanks for the quick answer!

I checked the preinitialize() and it gets called once for every instance. I thought it would be magical and this would point at the prototype so I could just (pre)initialize that once and have the benefit of sharing the props through the prototype (i.e. equivalent to what the .extend({}) does) but this is not the case. I think I'll avoid that and rather stick to the Object.assign(proto) for now.