How to trigger events in backbone and marionette?

0
votes

Here is my widget module: 

app.module("Widget.MyWidget", function(MyWidget, app, Backbone, Marionette, $, _) {
    this.on("start", function(el){
        var that = this;
    }); 
    this.on("click", function(el){
        alert("click");        
    });
    this.renderWidget = function (id) {
        var that = this;
        var el = '#widget_' + id;
        widgetModel = new app.Widget.MyWidget.models.meteo();  
        widgetModel.getWidget(id)
        .fetch({ type: "GET" })
            .done(function(){
                var widgetView = new that.views.widgetView({model:widgetModel, el : el});
                widgetView.render();
            })
        });
    };
});

and here is the Marionette view:

define(['hbs!modules/myWidget'],function (template) {
    var meteoView = Marionette.ItemView.extend({
        template: template,

events: {
    "dblclick"                : "open",
    "click"         : "select",
    "contextmenu .icon.doc"   : "showMenu",
    "click .show_notes"       : "toggleNotes",
    "click .title .lock"      : "editAccessLevel",
    "mouseover"  : "showTooltip"
  },

    onShow: function(){
            var view = this;
            alert("showing");

    }
    });

    return meteoView;
});

Everything works perfectly: the model is loaded and populated with data, the view is rendered on screen with the data.

But, I cannot set any event on the view: I would like to attach a click event to the view: What do I do wrong ?

regards

1
backbone.jsmarionette

1 Answers

1
votes

You must define your callbacks in your view :

var meteoView = Marionette.ItemView.extend({
    ....
    open: function() {},
    select: function() {},
    showMenu: function() {},
    toggleNotes: function() {},
    editAccessLevel: function() {},
    showTooltip: function() {},
    ....
}