Geek asks and answers

Triggering BackboneJs Events in Typescript

I am writing a Backbone program in Typescript in which I cannot initialize any events. Here is a test class that I created to fix the problem. The function is start()not called when the div is clicked.

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

Here's the console output:

Rendered

Here is the typescript baseline definition that I use:

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

Here is the CDN place for backboneJS

Minified: http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js

Non-Minified: http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone.js

I'm worried if my syntax is right, or does this have anything to do with the typescript Backbone definition.

UPDATE

, , , typescript "" (, events()). "", "Uncaught TypeError: Object [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
+3
2

, TypeScript . :

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

, TypeScript , events . , Backbone , events , Backbone .

, , TypeScript events , - .

:

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

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

- getter TypeScript, fooobar.com/questions/2106470/....

, - , . 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 delegateEvents
        this.delegateEvents();
        $("#testDiv").css("height", 100).css("width", 100).css("background-color", "green");
        console.log("Rendered");
        return this;
    }
}

// ...

new TestView().render();
+2

, , , es7 decorators, , angular2 :

 @component({
   events: {
     "click #testDiv" : "start"
   }
 })
 class TestView extends Backbone.View{
   start(){
     console.log("Clicked");
   }
   render(){
     // ...
   }
 }


export function component(definition: any) {
  return function (constructor: any) {
    Object.assign(constructor.prototype, definition)
  }
}

, , , .

, /, preinitialize, , :

 class TestView extends Backbone.View {
   @component({
     events: {
       "click #testDiv" : "start"
     }
   })
   preinitialize(){}

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


export function component(definition: any) {
  return function (target: Object, methodName: string, descriptor: TypedPropertyDescriptor<Function>) {
    Object.assign(target, definition)
  }
}
+1

More articles:


All Articles