undelegateEventsundelegateEvents() Removes all of the view's delegated events. Useful if you want to disable or remove a view from the DOM temporarily.

templateview.template([data]) While templating for a view isn't a function provided directly by Backbone, it's often a nice convention to define a template function on your views. In this way, when rendering your view, you have convenient access to instance data. For example, using Underscore templates: var LibraryView = Backbone.View.extend({ template: _.template(...) });

setElementview.setElement(element) If you'd like to apply a Backbone view to a different DOM element, use setElement, which will also create the cached $el reference and move the view's delegated events from the old element to the new one.

removeview.remove() Removes a view and its el from the DOM, and calls stopListening to remove any bound events that the view has listenTo'd.

renderview.render() The default implementation of render is a no-op. Override this function with your code that renders the view template from model data, and updates this.el with the new HTML. A good convention is to return this at the end of render to enable chained calls. var Bookmark = Backbone.View.extend({ template: _.template(...), render: function() { this.$el.html(this.template(this.model.attributes)); return this; } }); Backbone is agnostic with respect to your pre

extendBackbone.View.extend(properties, [classProperties]) Get started with views by creating a custom view class. You'll want to override the render function, specify your declarative events, and perhaps the tagName, className, or id of the View's root element. var DocumentRow = Backbone.View.extend({ tagName: "li", className: "document-row", events: { "click .icon": "open", "click .button.edit": "openEditDialog", "click .button.delete": "destroy" }, ini

eventsview.events or view.events() The events hash (or method) can be used to specify a set of DOM events that will be bound to methods on your View through delegateEvents. Backbone will automatically attach the event listeners at instantiation time, right before invoking initialize. var ENTER_KEY = 13; var InputView = Backbone.View.extend({ tagName: 'input', events: { "keydown" : "keyAction", }, render: function() { ... }, keyAction: function(e) { if (e.which === EN

delegateEventsdelegateEvents([events]) Uses jQuery's on function to provide declarative callbacks for DOM events within a view. If an events hash is not passed directly, uses this.events as the source. Events are written in the format {"event selector": "callback"}. The callback may be either the name of a method on the view, or a direct function body. Omitting the selector causes the event to be bound to the view's root element (this.el). By default, delegateEvents is called within the View'

elview.el All views have a DOM element at all times (the el property), whether they've already been inserted into the page or not. In this fashion, views can be rendered at any time, and inserted into the DOM all at once, in order to get high-performance UI rendering with as few reflows and repaints as possible. this.el can be resolved from a DOM selector string or an Element; otherwise it will be created from the view's tagName, className, id and attributes properties. If none are set, thi

$ (jQuery)view.$(selector) If jQuery is included on the page, each view has a $ function that runs queries scoped within the view's element. If you use this scoped jQuery function, you don't have to use model ids as part of your query to pull out specific elements in a list, and can rely much more on HTML class attributes. It's equivalent to running: view.$el.find(selector) ui.Chapter = Backbone.View.extend({ serialize : function() { return { title: this.$(".title").text(),