1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 6 <title>Hello World in Backbone.js</title> 7 </head> 8 <body> 9 <!-- ========= --> 10 <!-- Your HTML --> 11 <!-- ========= --> 12 13 <div id="container">Loading...</div> 14 15 <!-- ========= --> 16 <!-- Libraries --> 17 <!-- ========= --> 18 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 19 <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js" type="text/javascript"></script> 20 <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js" type="text/javascript"></script> 21 <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.0/backbone.localStorage-min.js" type="text/javascript"></script> 22 23 <!-- =============== --> 24 <!-- Javascript code --> 25 <!-- =============== --> 26 <script type="text/javascript"> 27 var AppView = Backbone.View.extend({ 28 // el - stands for element. Every view has a element associate in with HTML content will be rendered. 29 el: '#container', 30 // It's the first function called when this view it's instantiated. 31 initialize: function(){ 32 this.render(); 33 }, 34 // $el - it's a cached jQuery object (el), in which you can use jQuery functions to push content. Like the Hello World in this case. 35 render: function(){ 36 this.$el.html("Hello World"); 37 } 38 }); 39 40 var appView = new AppView(); 41 </script> 42 43 </body> 44 </html>