2

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

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

4

4 回答 4

2

正如史蒂夫芬顿所说，这是因为 Typescripts 扩展与下划线 / backones 扩展方法的工作方式不同。

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

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

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

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

于 2013-02-11T10:52:41.770 回答
2

我看过了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();
于 2013-01-30T10:34:27.760 回答
2

在构造函数中添加所有已初始化的字段并在最后调用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();
于 2013-02-05T03:17:47.987 回答
0

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

class AppRouter extends Backbone.Router {

    constructor() {

        super({
            routes: {
                "*actions": "defaultRoute"
            }
        });
    }
}
于 2019-04-30T06:50:25.957 回答