Backbone.js First Example

The Backbone.js application is the mix of HTML and JavaScript. The first thing you need is an HTML page.

<!DOCTYPE html>  
<html>  
<head>  
.  
.  
</head>  
<body>  
.  
.  
</body>  
</html>  

Second, you need to add Backbone.js library:

<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js" type="text/javascript"></script> 

Add the JavaScript file:

<script type="text/javascript">
var  Person = Backbone.Model.extend();
var person = new Person();
person.set({ fname: "Sheela", lname:"Sharma"});
document.write("What's my name: ", person.get('fname'));
</script>

First Backbone.js Example

<!DOCTYPE html>
   <head>
      <title>Model Example</title>
         <script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" type="text/javascript"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" type="text/javascript"></script>
         <script type="text/javascript">
            var  Person = Backbone.Model.extend();
            var person = new Person();
            person.set({ fname: "Mahesh", lname:"Sharma"});
            document.write("What's my name: ", person.get('fname'));
         </script>
   </head>
</html>

Test it Now

Next TopicBackbone.js Architecture

← prev next →