在Typescript中运行BackboneJs事件

EternallyCurious 发表于 Dev

永远好奇

我正在用Typescript编写Backbone程序，但无法初始化任何事件。这是我为解决问题而创建的测试类。start()单击div时未调用该函数。

class TestView extends Backbone.View{

    events = {
        "click #testDiv" : "start"
    }

    start(){
        console.log("Clicked");
    }

    constructor(options?){
        super(options);
    }

    render(){
        $root.html(getNewDiv("testDiv"));
        $("#testDiv").css("height", 100).css("width", 100).css("background-color", "green");
        console.log("Rendered");
        return this;
    }
}

function getNewDiv(id:string) {
    return "<div id = \"" + id + "\"></div>"
}

new TestView().render();

这是控制台输出：

Rendered

这是我正在使用的主干打字稿定义：

https://github.com/borisyankov/DefinitelyTyped/blob/master/backbone/backbone.d.ts

这是骨架JS的CDN位置

缩小版：http ://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js

非最小化：http ://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone.js

我担心我的语法是否正确，或者与Backbone的Typescript定义有关。

更新

凯文·皮尔（Kevin Peel）在下面显示的答案抛出错误，因为在Typescript定义文件中，“事件”被定义为一个函数（例如events（））。如果仅创建“事件”函数，则会收到错误-“未捕获的TypeError：对象[object Object]没有方法'off'”。如果我使用getter方法（例如，get events（）{}），则在实际触发事件时并没有真正发生任何事情。

Using delegate Events

我试图delegateEvents()在Backbone.View中使用该函数，这会产生错误：

constructor(options:any, question:Question, div:JQuery) {
        this.delegateEvents({
           "click" : "clicked"
        });
    }

错误：

Uncaught TypeError: Object [object Object] has no method 'off' backbone.js:1082
h.extend.undelegateEvents backbone.js:1082
h.extend.delegateEvents backbone.js:1059

凯文·皮尔

问题在于TypeScript定义事件的位置。当您定义这样的事件时：

class TestView extends Backbone.View {
    events = {
        "click #testDiv": "start"
    }
    // ...
}

TypeScript的作用是在初始化实例后将其events作为属性附加。因此，当Backbone初始化视图时，尚未附加视图，因此Backbone无法绑定它们。events

不幸的是，似乎没有一种好的方法可以让TypeScript分配events给原型，因此您需要以某种方式来解决它。

绝对最简单的方法是自己在原型上设置事件：

class TestView extends Backbone.View {
    // Get rid of the events declaration in here
    // ...
}

TestView.prototype.events = {
    "click #testDiv": "start"
}

解决此问题的第二种可能方法是使用此StackOverflow答案中getter建议的TypeScript功能。

最后，第三种方法是每次渲染时都绑定事件。这是解决TypeScript问题的另一种简便方法，但是如果多次渲染视图，它可能不是最佳解决方案。

class TestView extends Backbone.View{
    events = {
        "click #testDiv" : "start"
    }

    // ...

    render(){
        $root.html(getNewDiv("testDiv"));
        // Here is where you'll bind the events using Backbone's delegateEvents
        this.delegateEvents();
        $("#testDiv").css("height", 100).css("width", 100).css("background-color", "green");
        console.log("Rendered");
        return this;
    }
}

// ...

new TestView().render();