CODEWITHSUNDEEP
backbone.jsmarionette
Hayk Aghabekyan
Hayk Aghabekyan

Reputation: 1087

Marionettejs events issue

I am using MarionetteJS v2.0.2 and here is my issue

I have itemView bellow

var Users = Marionette.ItemView.extend({
    template: 'user.html',
    tagName: 'li',
    attributes: {
        class: 'name'
    },
    initialize: function () {
        //console.log(this);
    },
    events: {
        "click.name": "onClick"
    },
    onClick: function () {
        console.log('click');
    }
});

So when in my events I am writing "click.name", the event is being fired, but when I am writing "click .name" (there is a space) it is not.

Can anyone help me understand why?

Upvotes: 1

Views: 77

Answers (1)

poeticGeek
poeticGeek

Reputation: 1041

As was mentioned in the comments, the reason why

events: {
        "click .name": "onClick"
    },

doesnt works is that by adding " .name" you are providing a selector to the event binding but the scope of the binding is the el (in your case the li) of the view itself and since you assigned the ".name" class to the li there is no inner item with that class name and the binding doesnt work.

Doing "click.name" (no space) is exactly like doing "click" on its own only that you are providing a namespace for your binding and this is valid as far as jQuery is concerned - http://api.jquery.com/on/#event-names

You can see how this works without backbone. for example take the following bindings:

//this will work because were listening for click on our li
$("li").on("click", function(){
  console.log("im the jquery handler");
});

 //this will work because were doing the same as before only adding a namespace for our event 
$("li").on("click.name", function(){
  console.log("im the jquery handler");
});

 //this will NOT work because were adding the .name selector and jquery wont find an element with this class in our li element 
$("li").on("click",".name", function(){
  console.log("im the jquery handler");
});

In short, you dont need the .name as far as the event goes or you should add the .name class to an inner element as part of your template, then it will work with the code you supplied in the question.

Upvotes: 1

Related Questions