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

Question

我正在尝试将基本的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();

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

Answer 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();

Answer 2

正如Steve Fenton所提到的那样，因为Typescripts扩展不像underscore / backones扩展方法那样工作。

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

在orad所描述的ts类构造函数中调用Backbone.Router.apply（this，arguments）可确保在设置routes字段后进行此调用。

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

并且只是一个FYI：如果你想让元素的dom事件被触发，你可以在视图类的构造函数中调用delegateEvents（this.events）

Answer 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();

Answer 4

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

class AppRouter extends Backbone.Router {

    constructor() {

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