Question

我正在阅读这本书＆＃34;掌握TypeScript＆＃34;其中作者演示了如何使用Backbone生成模型，集合和视图。

我定义了以下类：

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);
    }
...
}

不幸的是，TypeScript不会使用错误编译它：

构建：＆＃39;超级＆＃39;必须先致电，然后再访问这个＆＃39;在派生类的构造函数
中

然而，如果我将呼叫转移到超级＆＃34;这个＆＃34;

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 };
     }
...
}

然后我的事件不会发生。我唯一能做到的就是解决这个问题，就是在使用＆＃34; this＆＃34;之后，在生成的JavaScript代码中将调用移动到super，从而修改TypeScript编译的内容。

有没有办法让我的事件在仍然遵循正确的TypeScript规则的情况下工作？

Answer 1

使用＆＃34;正常＆＃34; Backbone不能很好地工作，但我能够通过基于Ryan链接的文章的更多DIY方法完成它：

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;
    }
    ...
}

Answer 2

使用装饰器的另一种可能性。只需查看https://github.com/dsheiko/ng-backbone/blob/master/src/core/component.ts 这个@Component的使用类似于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();

装饰器将指定的属性直接注入视图原型。因此它们已经可用于构造函数（超级）

Answer 3

只需移动＆＃34; this.classname ......＆＃34;和＆＃34; this.events ...＆＃34;超出构造函数，并将它们初始化，就像这样（这可能不适合你的代码，但类似）：

initialize() {   
    //... is a list tag.
    this.setElement($("<li />")); 
    // The DOM events specific to an item.
    this.events = {
        "click .check": "toggleDone",
        "dblclick label.todo-content": "edit",
        "click span.todo-destroy": "clear",
        "keypress .todo-input": "updateOnEnter",
        "blur .todo-input": "close"
    };
}

Backbone，TypeScript和super

3 个答案: