rafi · December 19, 2015 03:39
diff --git a/collection_basics.js b/collection_basics.js
 var Todo = Backbone.Model.extend({
 	defaults: {
 		title: '',
 		completed: false
 	}
 });

 var TodosCollection = Backbone.Collection.extend({
 	model: Todo
 });

 var myTodo = new Todo({ id: 2, title: 'Read the whole book' });

 // pass array of models on collection instantiation
 var todos = new TodosCollection([myTodo]);
 console.log("Collection size: "+todos.length);

 // Models, as objects, are passed by reference
 var todo2 = todos.get(2);
 console.log(todo2 === myTodo); // true

 // Adding and Removing Models
 var a = new Todo({ title: 'Go to Jamaica.'}),
    b = new Todo({ title: 'Go to China.'}),
    c = new Todo({ title: 'Go to Disneyland.'});

 var todos = new TodosCollection([ a, b ]);
 console.log("Collection size: " + todos.length);

 todos.add(c);
 console.log("Collection size: " + todos.length);

 todos.remove([ a, b ]);
 todos.remove(c);

 // Underscore utility functions
 var collection = new Backbone.Collection([
  { name: 'Tim', age: 5 },
  { name: 'Ida', age: 26 },
  { name: 'Rob', age: 55 }
 ]);

 var filteredNames = collection.chain() // start chain
  .filter(function(item) { return item.get('age') > 10; })
  .map(function(item) { return item.get('name'); })
  .value(); // terminates the chain and returns the result array

 console.log(filteredNames); // logs: ['Ida', 'Rob']
 console.log(collection.pluck('name')); // logs: ['Tim', 'Ida', 'Rob']
diff --git a/model.js b/model.js
 // Define a Product Model
 var Product = Backbone.Model.extend({
 	defaults: {
 		title: '',
 		in_stock: false
 	}
 });

 // Instantiate the Product Model
 var myProduct = new Product({
 	title: 'Toy'
 });
diff --git a/model_basics.js b/model_basics.js
 var Todo_Simple = Backbone.Model.extend({});

 var todo1 = new Todo_Simple();
 console.log(JSON.stringify(todo1));

 var todo2 = new Todo_Simple({
 	title: 'Hello world',
 	completed: true
 });
 console.log(JSON.stringify(todo2));

 todo2.set('title', 'Dylan');
 todo2.set({ completed : false });
 console.log(todo2.get('title'));
 console.log(todo2.get('completed'));

 var Todo_Init = Backbone.Model.extend({
 	initialize: function() {
 		console.log('This model has been initialized.');
 		this.on('change', function() {
 			console.log('- Values for this model have changed.');
 		});
 	}
 });

 var Todo_Defaults = Backbone.Model.extend({
 	initialize: function () {
 		this.on('change:title', function() {
 			console.log('Title value for this model has changed.');
 		});
 	},
 	defaults: {
 		title: '',
 		completed: false
 	},
 	validate: function(attribs) {
 		if (attribs.title === undefined) {
 			return "Remember to set a title for your todo.";
 		}
 	}
 });

diff --git a/router.js b/router.js
 // index.html
 $(function() {
 	window.router = new ProductRouter();
 	Backbone.history.start();
 });

 // router.js
 var ProductRouter = Backbone.Router.extend({
 	routes: {
 		'products': 'listProducts'
 	},
 	listProducts: function () {
 		var products = new Products();
 		products.fetch();
 		
 		var collectionView = new ProductsView({
 			collection: products
 		});
 		$('#products').html(collectionView.render().el);
 	}
 });
diff --git a/template.html b/template.html
 <!doctype html>
 <html lang="en">
 <head>
 	<meta charset="utf-8">
 	<title></title>
 	<meta name="description" content="">
 </head>
 <body>
 	<div id="product"></div>
 	
 	<script type="text/template" id="item-template">
 		<div class="view">
 			<input class="toggle" type="checkbox"
 				<%= in_stock ? 'checked' : '' %> />
 			<label><%- title %></label>
 			<button class="destroy"></button>
 		</div>
 		<input class="edit" value="<%- title %>">
 	</script>

 	<script src="jquery.js"></script>
 	<script src="underscore.js"></script>
 	<script src="backbone.js"></script>
 	<script src="model.js"></script>
 	<script src="view.js"></script>
 </body>
 </html>
diff --git a/view.js b/view.js
 var ProductView = Backbone.View.extend({

 	tagName:  'li',

 	// Cache the template function for a single item.
 	productTpl: _.template( $('#item-template').html() ),

 	events: {
 		'dblclick label': 'edit',
 		'keypress .edit': 'updateOnEnter',
 		'blur .edit':     'close'
 	},

 	// Called when the view is first created
 	initialize: function () {
 		this.$el = $('#product');
 	},

 	// Re-render the name of the product item.
 	render: function() {
 		this.$el.html( this.productTpl( this.model.toJSON() ) );
 		// $el here is a reference to the jQuery element 
 		// associated with the view, productTpl is a reference
 		// to an Underscore template and toJSON() returns an 
 		// object containing the model's attributes
 		// Altogether, the statement is replacing the HTML of
 		// a DOM element with the result of instantiating a 
 		// template with the model's attributes.
 		this.input = this.$('.edit');
 		return this;
 	},
 	
 	edit: function() {
 		// executed when product label is double clicked
 	},

 	close: function() {
 		// executed when product loses focus
 	},

 	updateOnEnter: function( e ) {
 		// executed on each keypress when in product edit mode, 
 		// but we'll wait for enter to get in action
 	}
 });

 // Create a view for a product
 var productView = new ProductView({ model: myProduct });
diff --git a/view_basics.js b/view_basics.js
 var TodoView = Backbone.View.extend({

  tagName:  'li',

  // Cache the template function for a single item.
  todoTpl: _.template( "An example template" ),

  events: {
    'dblclick label': 'edit',
    'keypress .edit': 'updateOnEnter',
    'blur .edit':   'close'
  },

  // Re-render the titles of the todo item.
  render: function() {
    this.$el.html( this.todoTpl( this.model.toJSON() ) );
    this.input = this.$('.edit');
    return this;
  },

  edit: function() {
    // executed when todo label is double clicked
  },

  close: function() {
    // executed when todo loses focus
  },

  updateOnEnter: function( e ) {
    // executed on each keypress when in todo edit mode,
    // but we'll wait for enter to get in action
  }
 });

 var todoView1 = new TodoView();

 // log reference to a DOM element that corresponds
 // to the view instance
 console.log(todoView1.el); // logs <li></li>

 // Alternatively, you can set el to an existing
 // element when creating the view:
 var todosView2 = new TodosView({ el: $('#footer') });
	var Todo = Backbone.Model.extend({
	defaults: {
	title: '',
	completed: false
	}
	});

	var TodosCollection = Backbone.Collection.extend({
	model: Todo
	});

	var myTodo = new Todo({ id: 2, title: 'Read the whole book' });

	// pass array of models on collection instantiation
	var todos = new TodosCollection([myTodo]);
	console.log("Collection size: "+todos.length);

	// Models, as objects, are passed by reference
	var todo2 = todos.get(2);
	console.log(todo2 === myTodo); // true

	// Adding and Removing Models
	var a = new Todo({ title: 'Go to Jamaica.'}),
	b = new Todo({ title: 'Go to China.'}),
	c = new Todo({ title: 'Go to Disneyland.'});

	var todos = new TodosCollection([ a, b ]);
	console.log("Collection size: " + todos.length);

	todos.add(c);
	console.log("Collection size: " + todos.length);

	todos.remove([ a, b ]);
	todos.remove(c);

	// Underscore utility functions
	var collection = new Backbone.Collection([
	{ name: 'Tim', age: 5 },
	{ name: 'Ida', age: 26 },
	{ name: 'Rob', age: 55 }
	]);

	var filteredNames = collection.chain() // start chain
	.filter(function(item) { return item.get('age') > 10; })
	.map(function(item) { return item.get('name'); })
	.value(); // terminates the chain and returns the result array

	console.log(filteredNames); // logs: ['Ida', 'Rob']
	console.log(collection.pluck('name')); // logs: ['Tim', 'Ida', 'Rob']
	// Define a Product Model
	var Product = Backbone.Model.extend({
	defaults: {
	title: '',
	in_stock: false
	}
	});

	// Instantiate the Product Model
	var myProduct = new Product({
	title: 'Toy'
	});
	var Todo_Simple = Backbone.Model.extend({});

	var todo1 = new Todo_Simple();
	console.log(JSON.stringify(todo1));

	var todo2 = new Todo_Simple({
	title: 'Hello world',
	completed: true
	});
	console.log(JSON.stringify(todo2));

	todo2.set('title', 'Dylan');
	todo2.set({ completed : false });
	console.log(todo2.get('title'));
	console.log(todo2.get('completed'));

	var Todo_Init = Backbone.Model.extend({
	initialize: function() {
	console.log('This model has been initialized.');
	this.on('change', function() {
	console.log('- Values for this model have changed.');
	});
	}
	});

	var Todo_Defaults = Backbone.Model.extend({
	initialize: function () {
	this.on('change:title', function() {
	console.log('Title value for this model has changed.');
	});
	},
	defaults: {
	title: '',
	completed: false
	},
	validate: function(attribs) {
	if (attribs.title === undefined) {
	return "Remember to set a title for your todo.";
	}
	}
	});
	// index.html
	$(function() {
	window.router = new ProductRouter();
	Backbone.history.start();
	});

	// router.js
	var ProductRouter = Backbone.Router.extend({
	routes: {
	'products': 'listProducts'
	},
	listProducts: function () {
	var products = new Products();
	products.fetch();

	var collectionView = new ProductsView({
	collection: products
	});
	$('#products').html(collectionView.render().el);
	}
	});
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="description" content="">
	</head>
	<body>
	<div id="product"></div>

	<script type="text/template" id="item-template">
	<div class="view">
	<input class="toggle" type="checkbox"
	<%= in_stock ? 'checked' : '' %> />
	<label><%- title %></label>
	<button class="destroy"></button>
	</div>
	<input class="edit" value="<%- title %>">
	</script>

	<script src="jquery.js"></script>
	<script src="underscore.js"></script>
	<script src="backbone.js"></script>
	<script src="model.js"></script>
	<script src="view.js"></script>
	</body>
	</html>
	var ProductView = Backbone.View.extend({

	tagName: 'li',

	// Cache the template function for a single item.
	productTpl: _.template( $('#item-template').html() ),

	events: {
	'dblclick label': 'edit',
	'keypress .edit': 'updateOnEnter',
	'blur .edit': 'close'
	},

	// Called when the view is first created
	initialize: function () {
	this.$el = $('#product');
	},

	// Re-render the name of the product item.
	render: function() {
	this.$el.html( this.productTpl( this.model.toJSON() ) );
	// $el here is a reference to the jQuery element
	// associated with the view, productTpl is a reference
	// to an Underscore template and toJSON() returns an
	// object containing the model's attributes
	// Altogether, the statement is replacing the HTML of
	// a DOM element with the result of instantiating a
	// template with the model's attributes.
	this.input = this.$('.edit');
	return this;
	},

	edit: function() {
	// executed when product label is double clicked
	},

	close: function() {
	// executed when product loses focus
	},

	updateOnEnter: function( e ) {
	// executed on each keypress when in product edit mode,
	// but we'll wait for enter to get in action
	}
	});

	// Create a view for a product
	var productView = new ProductView({ model: myProduct });
	var TodoView = Backbone.View.extend({

	tagName: 'li',

	// Cache the template function for a single item.
	todoTpl: _.template( "An example template" ),

	events: {
	'dblclick label': 'edit',
	'keypress .edit': 'updateOnEnter',
	'blur .edit': 'close'
	},

	// Re-render the titles of the todo item.
	render: function() {
	this.$el.html( this.todoTpl( this.model.toJSON() ) );
	this.input = this.$('.edit');
	return this;
	},

	edit: function() {
	// executed when todo label is double clicked
	},

	close: function() {
	// executed when todo loses focus
	},

	updateOnEnter: function( e ) {
	// executed on each keypress when in todo edit mode,
	// but we'll wait for enter to get in action
	}
	});

	var todoView1 = new TodoView();

	// log reference to a DOM element that corresponds
	// to the view instance
	console.log(todoView1.el); // logs <li></li>

	// Alternatively, you can set el to an existing
	// element when creating the view:
	var todosView2 = new TodosView({ el: $('#footer') });