todomvc/examples/thorax/js/views/app.js

> Helping you select an MV\* framework

/*global Thorax, ENTER_KEY*/
(function () {
	'use strict';

	// The Application
	// ---------------

	// This view is the top-level piece of UI.
	Thorax.View.extend({
		// Setting a name will assign the template Thorax.templates['app']
		// to the view and create a view class at Thorax.Views['app']
		name: 'app',

		// Delegated events for creating new items, and clearing completed ones.
		events: {
			'keypress #new-todo': 'createOnEnter',
			'click #toggle-all': 'toggleAllComplete',
			// Any events specified in the collection hash will be bound to the
			// collection with `listenTo`. The collection was set in js/app.js
			collection: {
				'change:completed': 'toggleToggleAllButton',
				filter: 'toggleToggleAllButton'
			},
			rendered: 'toggleToggleAllButton'
		},

		toggleToggleAllButton: function () {
			var toggleInput = this.$('#toggle-all')[0];
			if (toggleInput) {
				toggleInput.checked = !this.collection.remaining().length;
			}
		},

		// When this function is specified, items will only be shown
		// when this function returns true
		itemFilter: function (model) {
			return model.isVisible();
		},

		// Generate the attributes for a new Todo item.
		newAttributes: function () {
			return {
				title: this.$('#new-todo').val().trim(),
				order: this.collection.nextOrder(),
				completed: false
			};
		},

		// If you hit return in the main input field, create new **Todo** model,
		// persisting it to *localStorage*.
		createOnEnter: function (e) {
			if (e.which !== ENTER_KEY || !this.$('#new-todo').val().trim()) {
				return;
			}

			this.collection.create(this.newAttributes());
			this.$('#new-todo').val('');
		},

		toggleAllComplete: function () {
			var completed = this.$('#toggle-all')[0].checked;
			this.collection.each(function (todo) {
				todo.save({
					completed: completed
				});
			});
		}
	});
}());