Backbone.js

The Backbone.Events module can be mixed into any object to provide a custom event channel. You can bind callbacks to events using on, remove them with off, or trigger them with trigger.

Key methods:

• on(name, callback, context): Binds a callback to an event. Supports space-separated event names (e.g., 'change blur') and event maps (e.g., { 'change': callback }).
• off(name, callback, context): Removes callbacks. If no arguments are provided, it removes all listeners for all events.
• once(name, callback, context): Binds a callback that will only fire once.
• trigger(name, *args): Fires all bound callbacks for the specified event name.
• listenTo(obj, name, callback): An inversion-of-control version of on. The current object listens to an event on obj, allowing for easier cleanup using stopListening.
• stopListening(obj, name, callback): Tells the current object to stop listening to specific events or all events on the target obj.

var object = {};
_.extend(object, Backbone.Events);
object.on('expand', function() {
  alert('expanded');
});
object.trigger('expand');

A Backbone.Collection is a collection of Backbone.Model instances (or raw objects). It maintains indexes of models for order and lookup by id.

Core functionality:

• add(models, options): Adds one or more models to the collection.
• remove(models, options): Removes models from the collection.
• set(models, options): Updates the collection by adding new models, removing those no longer present, and merging existing ones. This is the primary way to update a collection's contents.
• reset(models, options): Replaces the entire collection with a new list of models. This is optimized for bulk operations.
• push(model, options) / pop(options): Standard array-like operations for the end of the collection.
• unshift(model, options): Adds a model to the beginning of the collection.
• toJSON(options): Returns an array of the models' attributes.
• comparator: If specified, the collection will maintain its models in sort order based on this function or attribute name.

var MyCollection = Backbone.Collection.extend({
  model: MyModel,
  comparator: 'name'
});

var collection = new MyCollection([{ name: 'Zebra' }, { name: 'Apple' }]);
// Collection will be sorted: Apple, Zebra

A Backbone.View represents a logical chunk of UI. It manages a DOM element (this.el) and handles events via delegation.

Core Lifecycle Methods:

• preinitialize(options): Runs before any instantiation logic. Use this for setup that must happen before this.el is created.
• initialize(options): The standard initialization method. Override this for your view's logic.
• render(): The core method to populate this.el with HTML. Convention: Always return this to allow chaining.
• remove(): Removes the view's element from the DOM and stops all event listeners.

Event Delegation: Define an events hash to map DOM events to view methods:

events: {
  'click .button': 'handleClick',
  'mousedown .title': function(e) { ... }
}

Key Properties:

• this.el: The root DOM element of the view.
• this.$el: The jQuery-wrapped version of this.el.
• this.cid: A unique ID for the view instance.

var MyView = Backbone.View.extend({
  el: '<div>',
  events: {
    'click .btn': 'onBtnClick'
  },
  initialize: function() {
    console.log('View initialized');
  },
  render: function() {
    this.$el.html('<button class="btn">Click Me</button>');
    return this;
  },
  onBtnClick: function() {
    alert('Button clicked!');
  }
});

const view = new MyView();
view.render().$el.appendTo('body');

Backbone.Collection provides several methods to manipulate and query the set of models it contains:

• get(obj): Retrieves a model by its ID, CID, the model object itself, or an attributes object.
• has(obj): Returns true if the model is present in the collection.
• at(index): Returns the model at the specified index (supports negative indices).
• where(attrs, [first]): Returns models that match the provided attributes. If first is true, it returns only the first match.
• findWhere(attrs): A shorthand for where(attrs, true) to return the first matching model.
• pluck(attr): Returns an array of the values of a specific attribute from every model.
• shift(options): Removes the first model from the collection.
• slice(): Returns a sub-array of models using standard array slicing.
• sort(options): Forces the collection to re-sort itself based on the comparator. Triggers a 'sort' event unless options.silent is true.

// Example usage of collection methods
const collection = new Backbone.Collection([model1, model2]);
const model = collection.get({ id: 1 });
const matches = collection.where({ status: 'active' });
const names = collection.pluck('name');
collection.sort();

A Backbone.Model represents a discrete chunk of data and related methods for transformation.

Core functionality:

• set(key, val, options): Updates model attributes and triggers 'change' events. Supports both set('key', 'value') and set({ key: 'value' }) syntax. Use {silent: true} to prevent triggering events.
• get(attr): Returns the value of an attribute.
• unset(attr, options): Removes an attribute from the model.
• toJSON(options): Returns a copy of the model's attributes.
• fetch(options): Retrieves the model from the server and merges the response into the model.
• save(key, val, options): Syncs the model to the server. If wait: true is passed, it waits for the server response before updating local attributes.
• destroy(options): Removes the model from the server.
• isValid(options): Checks if the model is in a valid state based on the validate method.
• parse(resp, options): A method to convert a server response into a hash of attributes. Override this to transform data before it is set on the model.

var MyModel = Backbone.Model.extend({
  defaults: { name: 'Default Name' },
  validate: function(attrs) {
    if (!attrs.name) return 'Name is required';
  }
});

var model = new MyModel({ name: 'John' });
model.set({ name: 'Jane' });
model.save();