This article helps you to get started with a backbone
project.
Download required libraries:
- Backbone: http://backbonejs.org/ (Download the production version)
- Underscore.js: http://underscorejs.org/ (Download the production version)
- jQuery.js: http://jquery.com/download/ (Download the production version)
Create new index.html file.
The project
Index.html contents:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript"
src="js/libs/jquery-2.0.3.min.js"></script>
<script type="text/javascript"
src="js/libs/underscore-min.js"></script>
<script type="text/javascript"
src="js/libs/backbone-min.js"></script>
<script type="text/javascript"
src="js/libs/main.js"></script>
</head>
<body>
</body>
</html>
Note: you have to load the jquery js first before backbone
or underscore, else you will get an undefined error in the console.
Main.js contents
var Person =
Backbone.Model.extend({
defaults:
{
name:
'Ram',
age:
33,
score:
100
}
});
Run index.html in the chrome browser. Go to the dev
console in chrome and type this.
Congrats you have run your first backbone example.
We will extend this example by adding a new function, change
the model and add a new function.
var Person =
Backbone.Model.extend({
defaults:
{
name:
'Ram',
age:
33,
score:
100
},
displayScore:
function() {
console.log("Score is :
" +
this.get('score'));
}
});
Now if you execute the following commands in chrome
console, you will get the below output
We will see more about backbone in the next article.
No comments:
Post a Comment