Susi's Blog: My first exercise with Backbone.js

Files below itself says what it does, Hope it's not that difficult :)

Also read following for more information

https://addyosmani.com/backbone-fundamentals/#what-is-backbone.js

http://www.tutorialspoint.com/backbonejs/backbonejs_environment_setup.htm

	<!DOCTYPE html>
	<html>
	<head>
	<title>My first exercise with Backbone.js</title>
	</head>
	<body>
	<div id="container">Loading...</div>
	<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>
	<script src="student.js" type="text/javascript"></script>
	<script src="studentview.js" type="text/javascript"></script>
	</body>
	</html>

view raw index.html hosted with ❤ by GitHub

	var StudentModel = Backbone.Model.extend({
	defaults: {
	name: 'undifined',
	age: 0
	}
	});

	var myself = new StudentModel({
	name: 'Susinda',
	age:"31"
	});

view raw student.js hosted with ❤ by GitHub

	var StudentView = Backbone.View.extend({

	studentTemplate: _.template( "<label> Name : </label><label><%= name %></label></b></b><label> Age : </label><label><%= age %></label>" ),

	el: '#container',

	initialize: function(){
	console.log("StudentView initialized");
	},

	render: function(){
	this.$el.html(this.studentTemplate( this.model.attributes ));
	}
	});

	var StudentView = new StudentView({model:myself});
	StudentView.render();

view raw studentview.js hosted with ❤ by GitHub

Susi's Blog