Commit e624af75 authored by Sindre Sorhus's avatar Sindre Sorhus

Merge pull request #395 from ssarj/backbone-tidy-up

backbone examples: minor style updates.
parents 6c2eb0d9 8b95665f
...@@ -27,8 +27,8 @@ $(function( $ ) { ...@@ -27,8 +27,8 @@ $(function( $ ) {
// 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.input = this.$('#new-todo');
this.allCheckbox = this.$('#toggle-all')[0]; this.allCheckbox = this.$('#toggle-all')[0];
this.$input = this.$('#new-todo');
this.$footer = this.$('#footer'); this.$footer = this.$('#footer');
this.$main = this.$('#main'); this.$main = this.$('#main');
...@@ -81,18 +81,18 @@ $(function( $ ) { ...@@ -81,18 +81,18 @@ $(function( $ ) {
app.Todos.each(this.addOne, this); app.Todos.each(this.addOne, this);
}, },
filterOne : function (todo) { filterOne: function( todo ) {
todo.trigger('visible'); todo.trigger('visible');
}, },
filterAll : function () { filterAll: function() {
app.Todos.each(this.filterOne, this); app.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: app.Todos.nextOrder(), order: app.Todos.nextOrder(),
completed: false completed: false
}; };
...@@ -101,12 +101,12 @@ $(function( $ ) { ...@@ -101,12 +101,12 @@ $(function( $ ) {
// 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 !== ENTER_KEY || !this.input.val().trim() ) { if ( e.which !== ENTER_KEY || !this.$input.val().trim() ) {
return; return;
} }
app.Todos.create( this.newAttributes() ); app.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.
......
...@@ -17,7 +17,7 @@ $(function() { ...@@ -17,7 +17,7 @@ $(function() {
// The DOM events specific to an item. // The DOM events specific to an item.
events: { events: {
'click .toggle': 'togglecompleted', 'click .toggle': 'toggleCompleted',
'dblclick label': 'edit', 'dblclick label': 'edit',
'click .destroy': 'clear', 'click .destroy': 'clear',
'keypress .edit': 'updateOnEnter', 'keypress .edit': 'updateOnEnter',
...@@ -39,15 +39,15 @@ $(function() { ...@@ -39,15 +39,15 @@ $(function() {
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 && app.TodoFilter === 'completed') (!isCompleted && app.TodoFilter === 'completed')
...@@ -56,19 +56,19 @@ $(function() { ...@@ -56,19 +56,19 @@ $(function() {
}, },
// 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 });
......
...@@ -28,8 +28,8 @@ define([ ...@@ -28,8 +28,8 @@ define([
// 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.input = this.$('#new-todo');
this.allCheckbox = this.$('#toggle-all')[0]; this.allCheckbox = this.$('#toggle-all')[0];
this.$input = this.$('#new-todo');
this.$footer = this.$('#footer'); this.$footer = this.$('#footer');
this.$main = this.$('#main'); this.$main = this.$('#main');
...@@ -82,18 +82,18 @@ define([ ...@@ -82,18 +82,18 @@ define([
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(),
completed: false completed: false
}; };
...@@ -102,12 +102,12 @@ define([ ...@@ -102,12 +102,12 @@ 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.
......
...@@ -14,7 +14,7 @@ define([ ...@@ -14,7 +14,7 @@ define([
// The DOM events specific to an item. // The DOM events specific to an item.
events: { events: {
'click .toggle': 'togglecompleted', 'click .toggle': 'toggleCompleted',
'dblclick label': 'edit', 'dblclick label': 'edit',
'click .destroy': 'clear', 'click .destroy': 'clear',
'keypress .edit': 'updateOnEnter', 'keypress .edit': 'updateOnEnter',
...@@ -36,15 +36,15 @@ define([ ...@@ -36,15 +36,15 @@ define([
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')
...@@ -53,19 +53,19 @@ define([ ...@@ -53,19 +53,19 @@ define([
}, },
// 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 });
......
...@@ -58,7 +58,7 @@ ...@@ -58,7 +58,7 @@
<script src="../../../assets/base.js"></script> <script src="../../../assets/base.js"></script>
<script src="../../../assets/jquery.min.js"></script> <script src="../../../assets/jquery.min.js"></script>
<script src="../../../assets/lodash.min.js"></script> <script src="../../../assets/lodash.min.js"></script>
<script src="../../../architecture-examples/backbone/js/lib/backbone-min.js"></script> <script src="../../../architecture-examples/backbone/js/lib/backbone.js"></script>
<script src="js/lib/strophe.js"></script> <script src="js/lib/strophe.js"></script>
<script src="js/lib/strophe.forms.js"></script> <script src="js/lib/strophe.forms.js"></script>
<script src="js/lib/strophe.pubsub.js"></script> <script src="js/lib/strophe.pubsub.js"></script>
......
...@@ -27,7 +27,6 @@ $(function( $ ) { ...@@ -27,7 +27,6 @@ $(function( $ ) {
// 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.input = this.$('#new-todo');
this.allCheckbox = this.$('#toggle-all')[0]; this.allCheckbox = this.$('#toggle-all')[0];
window.app.Todos.on( 'add', this.addAll, this ); window.app.Todos.on( 'add', this.addAll, this );
...@@ -35,6 +34,7 @@ $(function( $ ) { ...@@ -35,6 +34,7 @@ $(function( $ ) {
window.app.Todos.on( 'change:completed', this.addAll, this ); window.app.Todos.on( 'change:completed', this.addAll, this );
window.app.Todos.on( 'all', this.render, this ); window.app.Todos.on( 'all', this.render, this );
this.$input = this.$('#new-todo');
this.$footer = this.$('#footer'); this.$footer = this.$('#footer');
this.$main = this.$('#main'); this.$main = this.$('#main');
...@@ -95,7 +95,7 @@ $(function( $ ) { ...@@ -95,7 +95,7 @@ $(function( $ ) {
// 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: app.Todos.nextOrder(), order: app.Todos.nextOrder(),
completed: false completed: false
}; };
...@@ -104,12 +104,12 @@ $(function( $ ) { ...@@ -104,12 +104,12 @@ $(function( $ ) {
// 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 !== ENTER_KEY || !this.input.val().trim() ) { if ( e.which !== ENTER_KEY || !this.$input.val().trim() ) {
return; return;
} }
app.Todos.create( this.newAttributes(), {wait: true} ); app.Todos.create( this.newAttributes(), {wait: true} );
this.input.val(''); this.$input.val('');
}, },
// Clear all completed todo items, destroying their models. // Clear all completed todo items, destroying their models.
......
...@@ -17,7 +17,7 @@ $(function() { ...@@ -17,7 +17,7 @@ $(function() {
// The DOM events specific to an item. // The DOM events specific to an item.
events: { events: {
'click .toggle': 'togglecompleted', 'click .toggle': 'toggleCompleted',
'dblclick label': 'edit', 'dblclick label': 'edit',
'click .destroy': 'clear', 'click .destroy': 'clear',
'keypress .edit': 'updateOnEnter', 'keypress .edit': 'updateOnEnter',
...@@ -33,7 +33,7 @@ $(function() { ...@@ -33,7 +33,7 @@ $(function() {
this.model.collection.on( 'remove', this.remoteRemove, this); this.model.collection.on( 'remove', this.remoteRemove, this);
}, },
remoteRemove: function (model) { remoteRemove: function( model ) {
if (model.id === this.model.id) { if (model.id === this.model.id) {
this.remove(); this.remove();
} }
...@@ -44,24 +44,24 @@ $(function() { ...@@ -44,24 +44,24 @@ $(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.input = this.$('.edit'); this.$input = this.$('.edit');
return this; return this;
}, },
// 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 });
......
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