Backbone tips & rules

bind-unbind.js

// Ok:
this.stateModel.on('change:readMore', this.renderReadMore, this);

// Awesome:
this.listenTo(this.stateModel, 'change:readMore', this.renderReadMore);

chainable.js

view.render().$el.appendTo(otherElement);

dom-changes-a.js

this.listenTo(this.stateModel, 'change', this.render);

dom-changes-b.js

this.listenTo(this.stateModel, 'change:readMore', this.renderReadMore);

dom-events.js

this.viewState.set('readMore', true);

events-callbacks-a.js

model.fetch({
  success: handleSuccess,
  error: handleError
});

events-callbacks-b.js

view.listenTo(model, 'sync', handleSuccess);
view.listenTo(model, 'error', handleError);
model.fetch();

view-scope-a.js

$('.text').html('Thank you');

view-scope-b.js

this.$('.text').html('Thank you');

// psssst... This is the same as:
// this.$el.find('.text').html('Thank you');

view-scope-c.js

var BodyView = Backbone.View.extend({
  initialize: function() {
    this.listenTo(Backbone, 'prevent-scroll', this.preventScroll);
  },

  preventScroll: function(prevent) {
    // .prevent-scroll has the following CSS rule: overflow: hidden;
    this.$el.toggleClass('prevent-scroll', prevent);
  }
});

// And now from anywhere in the code:
Backbone.trigger('prevent-scroll', true); // prevent scrolling
Backbone.trigger('prevent-scroll', false); // allow scrolling

views-data-less.js

this.viewState = new Backbone.Model();