Backbone hello world

 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>