Commit ae0d41a3 authored by Pascal Hartig's avatar Pascal Hartig

backbone+requirejs: jshint style

Also, added one missing - but optional - dependency requirement for Backbone in
the main.js to allow for r.js compilation.
parent 284d5ec4
/*global define*/
define([ define([
'underscore', 'underscore',
'backbone', 'backbone',
'backboneLocalstorage', 'backboneLocalstorage',
'models/todo' 'models/todo'
], function( _, Backbone, Store, Todo ) { ], function (_, Backbone, Store, Todo) {
'use strict';
var TodosCollection = Backbone.Collection.extend({ var TodosCollection = Backbone.Collection.extend({
// Reference to this collection's model. // Reference to this collection's model.
...@@ -13,28 +15,28 @@ define([ ...@@ -13,28 +15,28 @@ define([
localStorage: new Store('todos-backbone'), localStorage: new Store('todos-backbone'),
// Filter down the list of all todo items that are finished. // Filter down the list of all todo items that are finished.
completed: function() { completed: function () {
return this.filter(function( todo ) { return this.filter(function (todo) {
return todo.get('completed'); return todo.get('completed');
}); });
}, },
// Filter down the list to only todo items that are still not finished. // Filter down the list to only todo items that are still not finished.
remaining: function() { remaining: function () {
return this.without.apply( this, this.completed() ); return this.without.apply(this, this.completed());
}, },
// We keep the Todos in sequential order, despite being saved by unordered // We keep the Todos in sequential order, despite being saved by unordered
// GUID in the database. This generates the next order number for new items. // GUID in the database. This generates the next order number for new items.
nextOrder: function() { nextOrder: function () {
if ( !this.length ) { if (!this.length) {
return 1; return 1;
} }
return this.last().get('order') + 1; return this.last().get('order') + 1;
}, },
// Todos are sorted by their original insertion order. // Todos are sorted by their original insertion order.
comparator: function( todo ) { comparator: function (todo) {
return todo.get('order'); return todo.get('order');
} }
}); });
......
define([], function() { /*global define*/
'use strict';
define([], function () {
return { return {
// Which filter are we using? // Which filter are we using?
TodoFilter: '', // empty, active, completed TodoFilter: '', // empty, active, completed
......
/*global require*/
'use strict';
// Require.js allows us to configure shortcut alias // Require.js allows us to configure shortcut alias
require.config({ require.config({
// The shim config allows us to configure dependencies for // The shim config allows us to configure dependencies for
...@@ -28,9 +31,11 @@ require.config({ ...@@ -28,9 +31,11 @@ require.config({
}); });
require([ require([
'backbone',
'views/app', 'views/app',
'routers/router' 'routers/router'
], function( AppView, Workspace ) { ], function (Backbone, AppView, Workspace) {
/*jshint nonew:false*/
// Initialize routing and start Backbone.history() // Initialize routing and start Backbone.history()
new Workspace(); new Workspace();
Backbone.history.start(); Backbone.history.start();
......
/*global define*/
define([ define([
'underscore', 'underscore',
'backbone' 'backbone'
], function( _, Backbone ) { ], function (_, Backbone) {
'use strict';
var TodoModel = Backbone.Model.extend({ var TodoModel = Backbone.Model.extend({
// Default attributes for the todo // Default attributes for the todo
...@@ -12,7 +14,7 @@ define([ ...@@ -12,7 +14,7 @@ define([
}, },
// Toggle the `completed` state of this todo item. // Toggle the `completed` state of this todo item.
toggle: function() { toggle: function () {
this.save({ this.save({
completed: !this.get('completed') completed: !this.get('completed')
}); });
......
/*global define*/
define([ define([
'jquery', 'jquery',
'backbone', 'backbone',
'collections/todos', 'collections/todos',
'common' 'common'
], function( $, Backbone, Todos, Common ) { ], function ($, Backbone, Todos, Common) {
'use strict';
var Workspace = Backbone.Router.extend({ var Workspace = Backbone.Router.extend({
routes:{ routes: {
'*filter': 'setFilter' '*filter': 'setFilter'
}, },
setFilter: function( param ) { setFilter: function (param) {
// Set the current filter to be used // Set the current filter to be used
Common.TodoFilter = param.trim() || ''; Common.TodoFilter = param.trim() || '';
......
/*global define*/
define([ define([
'jquery', 'jquery',
'underscore', 'underscore',
...@@ -6,7 +7,8 @@ define([ ...@@ -6,7 +7,8 @@ define([
'views/todos', 'views/todos',
'text!templates/stats.html', 'text!templates/stats.html',
'common' 'common'
], function( $, _, Backbone, Todos, TodoView, statsTemplate, Common ) { ], function ($, _, Backbone, Todos, TodoView, statsTemplate, Common) {
'use strict';
var AppView = Backbone.View.extend({ var AppView = Backbone.View.extend({
...@@ -15,7 +17,7 @@ define([ ...@@ -15,7 +17,7 @@ define([
el: '#todoapp', el: '#todoapp',
// Compile our stats template // Compile our stats template
template: _.template( statsTemplate ), template: _.template(statsTemplate),
// Delegated events for creating new items, and clearing completed ones. // Delegated events for creating new items, and clearing completed ones.
events: { events: {
...@@ -27,7 +29,7 @@ define([ ...@@ -27,7 +29,7 @@ define([
// At initialization we bind to the relevant events on the `Todos` // At initialization we bind to the relevant events on the `Todos`
// collection, when items are added or changed. Kick things off by // collection, when items are added or changed. Kick things off by
// loading any preexisting todos that might be saved in *localStorage*. // loading any preexisting todos that might be saved in *localStorage*.
initialize: function() { initialize: function () {
this.allCheckbox = this.$('#toggle-all')[0]; this.allCheckbox = this.$('#toggle-all')[0];
this.$input = this.$('#new-todo'); this.$input = this.$('#new-todo');
this.$footer = this.$('#footer'); this.$footer = this.$('#footer');
...@@ -44,11 +46,11 @@ define([ ...@@ -44,11 +46,11 @@ define([
// Re-rendering the App just means refreshing the statistics -- the rest // Re-rendering the App just means refreshing the statistics -- the rest
// of the app doesn't change. // of the app doesn't change.
render: function() { render: function () {
var completed = Todos.completed().length; var completed = Todos.completed().length;
var remaining = Todos.remaining().length; var remaining = Todos.remaining().length;
if ( Todos.length ) { if (Todos.length) {
this.$main.show(); this.$main.show();
this.$footer.show(); this.$footer.show();
...@@ -59,7 +61,7 @@ define([ ...@@ -59,7 +61,7 @@ define([
this.$('#filters li a') this.$('#filters li a')
.removeClass('selected') .removeClass('selected')
.filter( '[href="#/' + ( Common.TodoFilter || '' ) + '"]' ) .filter('[href="#/' + (Common.TodoFilter || '') + '"]')
.addClass('selected'); .addClass('selected');
} else { } else {
this.$main.hide(); this.$main.hide();
...@@ -71,27 +73,27 @@ define([ ...@@ -71,27 +73,27 @@ define([
// Add a single todo item to the list by creating a view for it, and // Add a single todo item to the list by creating a view for it, and
// appending its element to the `<ul>`. // appending its element to the `<ul>`.
addOne: function( todo ) { addOne: function (todo) {
var view = new TodoView({ model: todo }); var view = new TodoView({ model: todo });
$('#todo-list').append( view.render().el ); $('#todo-list').append(view.render().el);
}, },
// Add all items in the **Todos** collection at once. // Add all items in the **Todos** collection at once.
addAll: function() { addAll: function () {
this.$('#todo-list').html(''); this.$('#todo-list').html('');
Todos.each(this.addOne, this); Todos.each(this.addOne, this);
}, },
filterOne: function( todo ) { filterOne: function (todo) {
todo.trigger("visible"); todo.trigger('visible');
}, },
filterAll: function() { filterAll: function () {
Todos.each(this.filterOne, this); Todos.each(this.filterOne, this);
}, },
// Generate the attributes for a new Todo item. // Generate the attributes for a new Todo item.
newAttributes: function() { newAttributes: function () {
return { return {
title: this.$input.val().trim(), title: this.$input.val().trim(),
order: Todos.nextOrder(), order: Todos.nextOrder(),
...@@ -101,25 +103,25 @@ define([ ...@@ -101,25 +103,25 @@ define([
// If you hit return in the main input field, create new **Todo** model, // If you hit return in the main input field, create new **Todo** model,
// persisting it to *localStorage*. // persisting it to *localStorage*.
createOnEnter: function( e ) { createOnEnter: function (e) {
if ( e.which !== Common.ENTER_KEY || !this.$input.val().trim() ) { if (e.which !== Common.ENTER_KEY || !this.$input.val().trim()) {
return; return;
} }
Todos.create( this.newAttributes() ); Todos.create(this.newAttributes());
this.$input.val(''); this.$input.val('');
}, },
// Clear all completed todo items, destroying their models. // Clear all completed todo items, destroying their models.
clearCompleted: function() { clearCompleted: function () {
_.invoke(Todos.completed(), 'destroy'); _.invoke(Todos.completed(), 'destroy');
return false; return false;
}, },
toggleAllComplete: function() { toggleAllComplete: function () {
var completed = this.allCheckbox.checked; var completed = this.allCheckbox.checked;
Todos.each(function( todo ) { Todos.each(function (todo) {
todo.save({ todo.save({
'completed': completed 'completed': completed
}); });
......
/*global define*/
define([ define([
'jquery', 'jquery',
'underscore', 'underscore',
'backbone', 'backbone',
'text!templates/todos.html', 'text!templates/todos.html',
'common' 'common'
], function( $, _, Backbone, todosTemplate, Common ) { ], function ($, _, Backbone, todosTemplate, Common) {
'use strict';
var TodoView = Backbone.View.extend({ var TodoView = Backbone.View.extend({
tagName: 'li', tagName: 'li',
template: _.template( todosTemplate ), template: _.template(todosTemplate),
// The DOM events specific to an item. // The DOM events specific to an item.
events: { events: {
...@@ -24,50 +26,50 @@ define([ ...@@ -24,50 +26,50 @@ define([
// The TodoView listens for changes to its model, re-rendering. Since there's // The TodoView listens for changes to its model, re-rendering. Since there's
// a one-to-one correspondence between a **Todo** and a **TodoView** in this // a one-to-one correspondence between a **Todo** and a **TodoView** in this
// app, we set a direct reference on the model for convenience. // app, we set a direct reference on the model for convenience.
initialize: function() { initialize: function () {
this.listenTo(this.model, 'change', this.render); this.listenTo(this.model, 'change', this.render);
this.listenTo(this.model, 'destroy', this.remove); this.listenTo(this.model, 'destroy', this.remove);
this.listenTo(this.model, 'visible', this.toggleVisible); this.listenTo(this.model, 'visible', this.toggleVisible);
}, },
// Re-render the titles of the todo item. // Re-render the titles of the todo item.
render: function() { render: function () {
this.$el.html( this.template( this.model.toJSON() ) ); this.$el.html(this.template(this.model.toJSON()));
this.$el.toggleClass( 'completed', this.model.get('completed') ); this.$el.toggleClass('completed', this.model.get('completed'));
this.toggleVisible(); this.toggleVisible();
this.$input = this.$('.edit'); this.$input = this.$('.edit');
return this; return this;
}, },
toggleVisible: function() { toggleVisible: function () {
this.$el.toggleClass( 'hidden', this.isHidden()); this.$el.toggleClass('hidden', this.isHidden());
}, },
isHidden: function() { isHidden: function () {
var isCompleted = this.model.get('completed'); var isCompleted = this.model.get('completed');
return ( // hidden cases only return (// hidden cases only
(!isCompleted && Common.TodoFilter === 'completed') (!isCompleted && Common.TodoFilter === 'completed') ||
|| (isCompleted && Common.TodoFilter === 'active') (isCompleted && Common.TodoFilter === 'active')
); );
}, },
// Toggle the `"completed"` state of the model. // Toggle the `"completed"` state of the model.
toggleCompleted: function() { toggleCompleted: function () {
this.model.toggle(); this.model.toggle();
}, },
// Switch this view into `"editing"` mode, displaying the input field. // Switch this view into `"editing"` mode, displaying the input field.
edit: function() { edit: function () {
this.$el.addClass('editing'); this.$el.addClass('editing');
this.$input.focus(); this.$input.focus();
}, },
// Close the `"editing"` mode, saving changes to the todo. // Close the `"editing"` mode, saving changes to the todo.
close: function() { close: function () {
var value = this.$input.val().trim(); var value = this.$input.val().trim();
if ( value ){ if (value) {
this.model.save({ title: value }); this.model.save({ title: value });
} else { } else {
this.clear(); this.clear();
...@@ -77,14 +79,14 @@ define([ ...@@ -77,14 +79,14 @@ define([
}, },
// If you hit `enter`, we're through editing the item. // If you hit `enter`, we're through editing the item.
updateOnEnter: function( e ) { updateOnEnter: function (e) {
if ( e.keyCode === Common.ENTER_KEY ) { if (e.keyCode === Common.ENTER_KEY) {
this.close(); this.close();
} }
}, },
// Remove the item, destroy the model from *localStorage* and delete its view. // Remove the item, destroy the model from *localStorage* and delete its view.
clear: function() { clear: function () {
this.model.destroy(); this.model.destroy();
} }
}); });
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment