转换为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

在构造函数中添加所有初始化字段，并在结尾处调用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 3

正如Steve Fenton所说，因为Typescripts扩展与underscore / backones扩展方法的工作方式不同。

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

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

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

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

Answer 4

可接受的答案似乎不适用于打字稿3.x。在使用int titleCount = 1; int chTitle = 1; int bmTitle = 1; int fmTitle = 1; int ptTitle = 1; int appTitle = 1; int infoTitle = 1; foreach (var chapter in breakslist) { string chapterBreak = chapter.Attribute("name").Value; XElement chapterParent = new XElement(tempNamespace + "break", new XAttribute("name", chapterBreak)); xtempdoc.Root.Element(tempNamespace + "body").Add(chapterParent); int h1 = 1; int h2 = 1; int h3 = 1; int h4 = 1; int h5 = 1; int h6 = 1; var chapterParagraphs = chapter.Elements().ToList(); foreach (var chapterElement in chapterParagraphs) { if (chapterElement.Name.LocalName == "p") { if (chapterElement.HasAttributes) { XAttribute firstAttributeValue = chapterElement.FirstAttribute; if (chapterElement.Attribute("id") != null) { if (chapterElement.Attribute("id").Value.Contains("h1") || chapterElement.Attribute("id").Value.Contains("h2") || chapterElement.Attribute("id").Value.Contains("h3") || chapterElement.Attribute("id").Value.Contains("h4") || chapterElement.Attribute("id").Value.Contains("h5") || chapterElement.Attribute("id").Value.Contains("h6")) { chapterElement.Attribute("id").Remove(); } } if (firstAttributeValue.Name.LocalName == "class") { string classAttributeValue = firstAttributeValue.Value; if (classAttributeValue.Contains("-title")) { classAttributeValue = classAttributeValue.Substring(0, classAttributeValue.IndexOf("-")); if (classAttributeValue == "ch") { var attributes = chapterElement.Attributes().ToList(); attributes.Insert(1, new XAttribute("id", classAttributeValue + chTitle)); chapterElement.Attributes().Remove(); chapterElement.Add(attributes); chapterParent.Add(chapterElement); titleCount = chTitle; chTitle++; continue; } else if (classAttributeValue == "fm") { var attributes = chapterElement.Attributes().ToList(); attributes.Insert(1, new XAttribute("id", classAttributeValue + fmTitle)); chapterElement.Attributes().Remove(); chapterElement.Add(attributes); chapterParent.Add(chapterElement); titleCount = fmTitle; fmTitle++; continue; } else if (classAttributeValue == "bm") { var attributes = chapterElement.Attributes().ToList(); attributes.Insert(1, new XAttribute("id", classAttributeValue + bmTitle)); chapterElement.Attributes().Remove(); chapterElement.Add(attributes); chapterParent.Add(chapterElement); titleCount = bmTitle; bmTitle++; continue; } else if (classAttributeValue == "pt") { var attributes = chapterElement.Attributes().ToList(); attributes.Insert(1, new XAttribute("id", classAttributeValue + ptTitle)); chapterElement.Attributes().Remove(); chapterElement.Add(attributes); chapterParent.Add(chapterElement); titleCount = ptTitle; ptTitle++; continue; } else if (classAttributeValue == "app") { var attributes = chapterElement.Attributes().ToList(); attributes.Insert(1, new XAttribute("id", classAttributeValue + appTitle)); chapterElement.Attributes().Remove(); chapterElement.Add(attributes); chapterParent.Add(chapterElement); titleCount = appTitle; appTitle++; continue; } else if (classAttributeValue == "info") { var attributes = chapterElement.Attributes().ToList(); attributes.Insert(1, new XAttribute("id", classAttributeValue + infoTitle)); chapterElement.Attributes().Remove(); chapterElement.Add(attributes); chapterParent.Add(chapterElement); titleCount = infoTitle; infoTitle++; continue; } else { chapterParent.Add(chapterElement); } } else if (classAttributeValue.StartsWith("h1")) { var attributes = chapterElement.Attributes().ToList(); attributes.Insert(1, new XAttribute("id", "h1" + "_" + titleCount + "-" + h1)); chapterElement.Attributes().Remove(); chapterElement.Add(attributes); chapterParent.Add(chapterElement); h1++; } else if (classAttributeValue.StartsWith("h2")) { var attributes = chapterElement.Attributes().ToList(); attributes.Insert(1, new XAttribute("id", "h2" + "_" + titleCount + "-" + h2)); chapterElement.Attributes().Remove(); chapterElement.Add(attributes); chapterParent.Add(chapterElement); h2++; } else if (classAttributeValue.StartsWith("h3")) { var attributes = chapterElement.Attributes().ToList(); attributes.Insert(1, new XAttribute("id", "h3" + "_" + titleCount + "-" + h3)); chapterElement.Attributes().Remove(); chapterElement.Add(attributes); chapterParent.Add(chapterElement); h3++; } else if (classAttributeValue.StartsWith("h4")) { var attributes = chapterElement.Attributes().ToList(); attributes.Insert(1, new XAttribute("id", "h4" + "_" + titleCount + "-" + h4)); chapterElement.Attributes().Remove(); chapterElement.Add(attributes); chapterParent.Add(chapterElement); h4++; } else if (classAttributeValue.StartsWith("h5")) { var attributes = chapterElement.Attributes().ToList(); attributes.Insert(1, new XAttribute("id", "h5" + "_" + titleCount + "-" + h5)); chapterElement.Attributes().Remove(); chapterElement.Add(attributes); chapterParent.Add(chapterElement); h5++; } else if (classAttributeValue.StartsWith("h6")) { var attributes = chapterElement.Attributes().ToList(); attributes.Insert(1, new XAttribute("id", "h6" + "_" + titleCount + "-" + h6)); chapterElement.Attributes().Remove(); chapterElement.Add(attributes); chapterParent.Add(chapterElement); h6++; } else { chapterParent.Add(chapterElement); } } } } } 之前，应先调用super()方法。由于骨干网正在this方法内初始化路由，因此无法对代码重新排序。这是路由配置直接传递到super()的版本。

super()