转换为TypeScript时, Backbone 路由不工作

mbskvtky  于 2022-11-10  发布在  TypeScript
关注(0)|答案(4)|浏览(168)

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

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

e4yzc0pl

e4yzc0pl1#

我已经看过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();
z31licg0

z31licg02#

正如Steve芬顿提到的,这是因为Typescripts extend的工作方式与下划线/ backones extend方法不同。
主要问题是路由器在类型脚本层次结构中的“子类”中设置routes字段之前调用_bindRoutes()
在ts类的构造函数中调用Backbone.Router.apply(this, arguments)(如orad所述),可确保在设置routes字段后进行此调用。
手动调用此函数也可以达到此目的。
顺便告诉你:如果您希望触发元素中的dom事件,请在视图类的构造函数中调用delegateEvents(this.events)

wkftcu5l

wkftcu5l3#

在构造函数中添加所有已初始化的字段,并在末尾调用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();
xam8gpfp

xam8gpfp4#

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

class AppRouter extends Backbone.Router {

    constructor() {

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

相关问题