javascript - Backbone, TypeScript och super

Jag arbetar mig igenom boken "Mastering TypeScript" där författaren visar användningen av Backbone för att skapa modeller, samlingar och vyer.

Jag har följande klass definierad:

export class ContactItemView extends Backbone.View<cm.ContactModel> {
    template: (properties?: any) => string;
    constructor(options?: any) {
        this.className = "contact-item-view";
        this.template = _.template(contactItemSnippet);
        this.events = <any>{ 'click': this.onClicked };
        super(options);
    }
...
}

Tyvärr kommer TypeScript inte att kompilera detta med felet:

Bygg: 'super' måste anropas innan 'this' används i konstruktorn för en härledd klass

Men om jag flyttar anropet till super ovanför "this"

export class ContactItemView extends Backbone.View<cm.ContactModel> {
    template: (properties?: any) => string;
    constructor(options?: any) {

        super(options);

        this.className = "contact-item-view";
        this.template = _.template(contactItemSnippet);
        this.events = <any>{ 'click': this.onClicked };
     }
...
}

då utlöses inte mitt event. Det enda jag har kunnat göra för att lösa detta är att flytta anropet till super i den resulterande JavaScript-koden till efter användningen av "this", och på så sätt ändra det som TypeScript har kompilerat.

Finns det ett sätt att få mina händelser att fungera samtidigt som jag följer de korrekta TypeScript-reglerna?

Svar #1

Att använda en "normal" Backbone fungerar inte så bra, men jag lyckades få det gjort med en lite mer gör-det-själv-approach baserad på artikeln som Ryan länkat:

export class ContactItemView extends Backbone.View<cm.ContactModel> {
    static template: (properties?: any) => string = _.template(contactItemSnippet);
    constructor(options?: any) {
        super(options);
        this.events = <any>{ 'click': this.onClicked };
    }

    events(): Backbone.EventsHash {
        return {
          // events
        };
    }

    render(): ContactItemView {
        this.$el
          .addClass("contact-item-view")
          .html(ContactItemView.template(...));
        return this;
    }
    ...
}

Svar #2

En annan möjlighet är att använda en dekoratör. Kolla bara in https://github.com/dsheiko/ng-backbone/blob/master/src/core/component.ts Denna @Component används på liknande sätt som Angular2:

import { Component, View } from "../ng-backbone/core";

@Component({
  el: "ng-hello",
  template: `Hello World!`
})

class HelloView extends View {
}

let hello = new HelloView();
hello.render();

Dekoratören injicerar specificerade egenskaper direkt i vyprototypen. Därför är de redan tillgängliga för konstruktören (super).

Relaterade artiklar