Events Wont work on Backbone.js

Question

I created a view and has the ff codes:

var app = app || {};

app.singleFlowerView = Backbone.View.extend({

  tagName: 'article',
  className: 'flowerListItem',
  // tells where to apply the views
  template: _.template( $("#flowerElement").html() ),
  // render
  render: function(){
    var flowerTemplate = this.template(this.model.toJSON());
    // el contains all the prop above and pass to backbone
    this.$el.html(flowerTemplate);
    return this;
  },

  events: {
    'mouseover': 'addBgColor',
    'mouseout': 'removeBgColor'
  },

  addBgColor: function(){
    this.$el.addBgColor('bgColorImage');
  },

  removeBgColor: function(){
    this.$el.removeBgColor('bgColorImage');
  }


});

When I run this to my HTML file I got the error addBgColor and removeBgColor is not a function. I have the CSS for this and all the models and views were set up.

Am I missing something here? Any idea why events doesn't work?

Emile Bergeron · Answer 1 · 2018-01-25T18:17:32.960

1

this.$el.addBgColor is the problem.

The events are triggering but you're calling addBgColor on the $el jQuery object, which is not a jQuery function, like the error message is telling you.

Check what's the difference between $el and el.

edited Jan 25 '18 at 18:17

answered Jan 25 '18 at 14:29

Emile Bergeron

17,074
5
83
129

score 0 · Answer 2 · edited Feb 08 '18 at 23:19

Tony, your events are cool and they are running they're just not doing anything.

this.addBgColor() will call your function in a view.

this.$el is referring to the html and there's no property called addBgColor assigned to $el.

You need to do something like change the class on your tag with the functions like so...

addBgColor: function(){
  this.$el.className = 'bgColorImage'
},

.bgColorImage {
  background-image: url('bgColorImage.jpg');
}

Events Wont work on Backbone.js

2 Answers2