Backbone Template

Standard fiddle

by Andy Novocin

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>
<div id="viewEl">
   <button type="button" id="bananaButton">Click Me To Increase Bananas</button>
   <p id="bananaDisplay"></p>
</div>

JavaScript

var MyViewClass = Backbone.View.extend({
    //initialize is called on instantiation
    //I use it to bind a change in this view's model's bananaCount attribute to a display action and I render a first time.
    initialize : function(){
        this.listenTo(this.model, 'change:bananaCount', this.render, this);
        this.render();
    },
    //This is a hash for DOM listeners it is unrelated to the built in Bacbone.Events (listenTo, trigger, 'change', etc);
    events : {
        "click #bananaButton" : function(){ this.model.set({bananaCount : this.model.get('bananaCount') + 1}); }  
    },
    //When it is time to render I will get the model's bananaCount and display it in the appropriate place in my "el"ement.
    render : function(){
      this.$el.find('#bananaDisplay').html(
          this.model.get('bananaCount') + ' bananas!'
      );
    } 
});


//At instantiation I name the "el"ement that this view is using and give it a model (which has a bananaCount attribute)
var viewI = new MyViewClass({ 
    el : "#viewEl", 
    model : new Backbone.Model({bananaCount : 7 })
});