learningBackbone.js

// Very simple. Just handles the process of
// display an unordered list of movies,
// while providing the ability to edit each movie
// and update the model.

// Any glaring bad practices? Still in the early
// Backbone learning stages.


(function(Movie) {

Movie.Model = Backbone.Model.extend({
	defaults: {
		release: '2012'
	},

	updateTitle: function(title) {
		this.set('title', title);
	}
});


Movie.Collection = Backbone.Collection.extend({
	model: Movie.Model
});


Movie.ListView = Backbone.View.extend({
	tagName: 'ul',

	initialize: function() {
		this.render();
	},

	render: function() {
		this.collection.each(function(movie) {
			var movieView = new Movie.View({
				model: movie
			});

			this.$el.append(movieView.el);
		}, this);
	}
});


// Better to use the one view per model method, like I've done here?
// I worry about all of the extra overhead/events.
// Would it be better to use a single ListView, and then
// filter through the model and attach each model to the
// generated element, via jQuery's data method?
Movie.View = Backbone.View.extend({
	tagName: 'li',

	template: _.template('<%= title %> (<strong><%= release %>)</strong>'),

	events: {
		'click': 'edit'
	},

	initialize: function() {
		this.render();

		this.model.on('change', this.render, this);
	},

	edit: function(e) {
		var text = $(e.target).text(),
				newTitle = prompt('What should it be?', text); // just for example

		this.model.updateTitle(newTitle);
	},

	render: function() {
		this.$el.html( this.template(this.model.toJSON()) );
	}
});


// Is this the best place for this stuff?

var movies = new Movie.Collection([
	{ title: 'Contact', release: '1996' },
	{ title: 'Back to the Future', release: '1985' },
	{ title: 'Titanic 3D' }
]);

var listView = new Movie.ListView({ collection: movies });

$('#container').append( listView.el );

})(App.module('Movie'));