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>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.js"></script>
<div id="mypage">
<div id="page">Click Me <span class="currentLevel">10</span></div>
<div id="page">Click Me <span class="currentLevel">10</span></div>
<div id="page">Click Me <span class="currentLevel">10</span></div>
</div>

CSS

#mypage {
   position: absolute;
}

JavaScript

var MyView = Backbone.View.extend({
    el : "#mypage",
    events: {
        "click" : "eventhandler"
    },
    initialize : function(){
        this.listenTo(this.model, 'change:level', this.animateLevel, this);  
    },
    animateLevel : function(model){
      var newlevel = model.get('level');
      var updown = model.get('updown');
      this.$el.find(".currentLevel").html(newlevel);
      this.$el.animate({ top : Math.max(Math.min(100 - newlevel*10, 95), 0) + "%"});
    },
    eventhandler : function(ev){
        this.model.levelChange();
    }
});

var Level = Backbone.Model.extend({ 
    defaults: {level: 10, updown : 'down'},
    levelChange: function(){
      var mylevel = this.get('level');
      if (mylevel == 10){
            this.set({updown: 'down', level : 5});
      } else if (mylevel == 0){
          this.set({updown: 'up', level : 5});   
      } else {
          this.set({level : this.get('level') + 
                    (this.get('updown') == "up" ? 5:-5 )});
      }
    }
});

var mylevel = new Level();
var myview = new MyView({model: mylevel});