CODEWITHSUNDEEP
javascriptjqueryeventsbackbone.js
user920041
user920041

Reputation:

How can I append an attribute to a JavaScript event?

At row level I catch the event and try to add an extra parameter

onRowClick: function(e){
    console.log("Event in row");
    e.model = "test";
    console.log(e.model) // prints 'test'
}

In main view I catch the same event again

onRowClick: function(e){
    console.log("Event in main view");
    console.log(e.model) //prints undefined
}

Console:

>Event in row
>test
>Event in main view
>undefined

How can I append an attribute to the event?

Upvotes: 0

Views: 142

Answers (3)

Sander
Sander

Reputation: 13421

instead of catching the rowClick event in the main view, i suggest you catch it in the row view, and pass it through the backbone event system... your parentview can bind to it's rows to catch a click.

there are two ways to do this,

trigger a custom event on your row's model, and let the parent bind to every model in the collection, though that seems like a hack and a performance hit.

i suggest doing it with an event aggregator:

var App = {
  events: _.extend({}, Backbone.Events);
};

var myGeneralView = Backbone.Views.extend({

  initialize: function() {
    _.bindAll(this, "catchMyCustomEvent";

    /* 
      and here you bind to that event on the event aggregator and 
      tell it to execute your custom made function when it is triggered.

      You can name it any way you want, you can namespace 
      custom events with a prefix and a ':'.
    */
    App.events.bind('rowView:rowClicked'); 
  },

  catchMyCustomEvent: function (model, e) {
    alert("this is the model that was clicked: " + model.get("myproperty"));
  }

  // other methods you will probably have here...
});

var myRowView = Backbone.Views.extend({

  tagName: "li",

  className: "document-row",

  events: {
    "click" : "myRowClicked"
  },

  initialize: function() {
    _.bindAll(this, "myRowClicked");
  },

  myRowClicked: function (e) {

    /*
      You pass your model and your event to the event aggregator
    */
    App.events.trigger('rowView:rowClicked', this.model, e); 
  }

});

Upvotes: 0

Willem Mulder
Willem Mulder

Reputation: 13994

The answer is that you don't catch the same event, but rather two (initially) identical events. Changing the first does not change the latter.

If you want to pass data between those events, you would need to store that data elsewhere (e.g. a closure, or if you don't care about the scope save it in the window object).

Upvotes: 1

RyanFishman
RyanFishman

Reputation: 695

There are 2 ways that I know of to pass data to a jQuery event. One with with e.data, you can add any properties to e.data like this.

http://www.barneyb.com/barneyblog/2009/04/10/jquery-bind-data/

the other way is to use closures such as:

function myFunc() {
   var model = 'test';      

   var x = {
      onRowClick: function(e){
          console.log("Event in row");
          console.log(model) // prints 'test'
      }
   }
}

Upvotes: 0

Related Questions