转换为 TypeScript 时，骨干路由不起作用答案

【问题标题】：Backbone routing doesn't work when converted to TypeScript转换为 TypeScript 时，骨干路由不起作用
【发布时间】：2013-01-13 17:41:27
【问题描述】：

我正在尝试将基本的 Backbone.js 路由器声明转换为 TypeScript。

var AppRouter = Backbone.Router.extend({
    routes: {
        "*actions": "defaultRoute"
    },

    defaultRoute: function () {
        document.write("Default Route Invoked");
    }
});

var app_router = new AppRouter();

Backbone.history.start();

我转换后的代码如下，不起作用：

class AppRouter extends Backbone.Router {
    routes = {
        "*actions": "defaultRoute"
    }

    defaultRoute() {
        document.write("Default Route Invoked");
    }
}

var app_router = new AppRouter();

Backbone.history.start();

我没有收到编译时或运行时错误，但代码不起作用。为什么？

【问题讨论】：

标签： backbone.js typescript backbone-routing

【解决方案1】：

我看过 Backbone.Router.extends，它不是基本的原型扩展 - 所以你不能只从 Backbone.Router.extends 切换到 TypeScript 类扩展。

我会更改您的 TypeScript 文件，使其看起来更像您的原始 JavaScript - 您仍将受益于智能感知和类型检查 - 您只是没有使用类：

var AppRouter = Backbone.Router.extend({
    routes: {
        "*actions": "defaultRoute"
    },

    defaultRoute: function () {
        document.write("Default Route Invoked");
    }
});

var app_router = new AppRouter();

Backbone.history.start();

【讨论】：

Backbone source 表明所有主干类型的扩展方法都是相同的。 Model.extend = Collection.extend = Router.extend = View.extend = History.extend = extend; 你在哪里看到路由器原型扩展的不同之处？
我并不是说 Backbone 彼此不同——它们与使用继承时由 TypeScript 生成的不同。你可以使用var app_router: Backbone.Router = ...，但 TypeScript 可能已经键入了 app_router 而没有明确说明。
我在this other Q/A 中扩展了这个问题。
@orad 我回答了你的问题。 Take a look here

【解决方案2】：

正如 Steve Fenton 提到的，这是因为 Typescripts 扩展与下划线 / backones 扩展方法的工作方式不同。

主要问题是路由器调用 _bindRoutes() 在您的 routes 字段已在类型脚本层次结构的“子类”中设置之前。

如 orad 所述，在您的 ts 类的构造函数中调用 Backbone.Router.apply(this, arguments)，确保此调用将在 routes 之后进行i> 字段已设置。

手动调用此函数也可以解决问题。

仅供参考：如果您希望触发元素中的 dom 事件，请在视图类的构造函数中调用 delegateEvents(this.events)

【讨论】：

【解决方案3】：

在构造函数中添加所有已初始化的字段，并在最后调用super：

class AppRouter extends Backbone.Router {

    routes: any;
    constructor(options?: Backbone.RouterOptions) {

        this.routes = {
            "*actions": "defaultRoute"
        }

        super(options);
    }

    initialize() {
        // can put more init code here to run after constructor
    }

    defaultRoute() {
        document.write("Default Route Invoked");
    }
}

var app_router = new AppRouter();

Backbone.history.start();

【讨论】：

我收到此错误。当类包含初始化属性或具有参数属性时，“超级”调用必须是构造函数中的第一条语句。

【解决方案4】：

接受的答案似乎不适用于 typescript 3.x 。在使用this 之前应调用super() 方法。重新排序代码将不起作用，因为主干正在 super() 方法中初始化路由。这里是路由配置直接传给super()的版本。

class AppRouter extends Backbone.Router {

    constructor() {

        super({
            routes: {
                "*actions": "defaultRoute"
            }
        });
    }
}

【讨论】：