Geek asks and answers

Typescript Trunk views Events do not fire

I am trying to make a simple scan view for testing using a trunk. I started with events, but no one shoots. What for? I have already done other things with the spine, such as routing, etc. No problem. Thank you for your time. My definition of the trunk system - -> this source <-

module Views {
export class MenuView extends Backbone.View {
    constructor(viewOptions?: Backbone.ViewOptions) {

        super(viewOptions);
    }

    el = document.body;
    events = {
        "click #Btn-Start": "navigate",
        "click #Btn-Software": "navigate",
        "click #Btn-Anderes": "navigate",
        "click #Btn-Impressum": "navigate"
    };

    initialize() {
        console.log("initialize"); // fire
    }

    render() {
        console.log("render"); // not fire
    }

    navigate() {
        console.log("navigate"); // not fire
    }
}

}

<body>
    <div id="Menu">
        <div id="Btn-Start"></div>
        <div id="Btn-Software"></div>
        <div id="Btn-Anderes"></div>
        <div id="Btn-Impressum"></div>
    </div>
<body>

EDIT: Tried routes with a route (name: string, callback: function) and routes as an object. It seems to work with a function reference, but not like a string in a routes object. Perhaps there is a way to declare it in this form.

+2
source share
6 answers

Use the setElement function inside ctor instead of el.

+1

Backbone typescript.

_super.call(this, attributes); this.events = { "click a.back": "back", "click a.changeDate": "changeDate" }; >

Backbone ( ) _super.call

var View = Backbone.View = function(options) {
   this.cid = _.uniqueId('view');
   this._configure(options || {});
   this._ensureElement();
   this.initialize.apply(this, arguments);
   this.delegateEvents();
};

, View , , .

, , Backbone.extend

export var MyView = Backbone.View.extend

1098 typescript codeplex

+2

- .

getter, , , ctor - .

export class View extends Backbone.View {
    get events() { 
        return { 
            "click .button" : "myEvent"
        }
    }
}

Collection, model. Backbone Backbone.Model

+1
source

Try setting el to "#Menu"

module Views {
export class MenuView extends Backbone.View {
    constructor(viewOptions?: Backbone.ViewOptions) {

        super(viewOptions);
    }

    el = "#Menu";
0
source

Try it. Basically, all events and any pre-instances / pre-processing go to Constructor.

The reason why render()it navigate()does not work is due to the fact that events are not connected properly.

module Views {
    export class MenuView extends Backbone.View {
        constructor(viewOptions?: Backbone.ViewOptions) {
            super(viewOptions);

            // Any initialization goes in the constructor.
            this.el = document.body;
            this.events = {
                 "click #Btn-Start": "navigate",
                 "click #Btn-Software": "navigate",
                 "click #Btn-Anderes": "navigate",
                 "click #Btn-Impressum": "navigate"
            };

            // Precompile and cache the template.
            this.template = _.template($('#template').html());
            console.log("initialize");
       }
       render() {
            console.log("render");
            return this;
       }
       navigate() {
            console.log("navigate");
       }
    }
}
0
source

Give it a try.

file: requirejsConfig.ts

require.config({
    paths: {
        jquery: 'bower_components/jquery/dist/jquery',
        underscore: 'bower_components/underscore/underscore',
        backbone: 'bower_components/backbone/backbone',
        test: 'test'
    }
});

require(['test'], function(Test: any){
    new Test.test; 
});

file: test.ts

/// <reference path="../typings/tsd.d.ts" />

import Backbone = require('backbone');
import $ = require( 'jquery');


export class Test extends Backbone.View<Backbone.Model> {
   events(): Backbone.EventsHash
    { 
        return { 
            'click': 'showResult'            
        }
    }
    constructor( options?: any )
    {
        super(options);
        this.setElement( $( '.test-el' ), true );        
    }    
   protected showResult(): void 
   {
        console.log( 'show result ' );    
   }
}
0
source

More articles:


All Articles