BigBird View example #1

gistfile1.js

var View = BigBird.View.extend({
  
  myVariable: false,
  
  // Exactly like the controller
  subscriptions: {
    "/foo": "bar"
  },
  
  /* 
   Events are shorthand for binding dom events on objects within the $el. So in this instance there is a child element <a class="btn"></a> within $el. If you don't pass a selector after the type of event, it defaults to the $el. The second arguement is the function *on this view* to call.
  */
  events: {
    "click .btn", "handleButtonClick"
  },
  
  // el is optional (but recommended!)
  // It can be a jQuery object or just a selector
  // setting means you get a jQuery object on this.$el
  // and a plain dom object on this.el
  el: $("#awesome-element"),
  
  // Initialize gets called on instaniation of the object
  initialize: function() {
    // this.$(selector) is equivalent of this.$el.find(selector)
    // Same as using the 'events' above.
    this.$('.btn').bind('click', $.proxy(this.handleButtonClick, this));
  },
  
  handleButtonClick: function(e) {
    console.log(this.myVariable);
  },
  
  bar: function() {
    console.log('I get called if someone uses $.publish("/foo")');
  }
  
});

// Instantiate a View
var ViewInstance = new View({ myVariable: true });

// Update the element
ViewInstance.setElement($('#my-new-element'));