Jump To …

1.js

This example illustrates the declaration and instantiation of a minimalist View.

Working example: 1.html.
Go to Example 2

Self-executing wrapper

(function($){

ListView class: Our main app view.

  var ListView = Backbone.View.extend({
    el: $('body'), // attaches `this.el` to an existing element.

initialize(): Automatically called upon instantiation. Where you make all types of bindings, excluding UI events, such as clicks, etc.

    initialize: function(){
      _.bindAll(this, 'render'); // fixes loss of context for 'this' within methods

       this.render(); // not all views are self-rendering. This one is.
    },

render(): Function in charge of rendering the entire view in this.el. Needs to be manually called by the user.

    render: function(){
      $(this.el).append("<ul> <li>hello world</li> </ul>");
    }
  });

listView instance: Instantiate main app view.

  var listView = new ListView();
})(jQuery);
Follow me on Twitter: @r2r