Skip to content

Commit

Permalink
For addyosmani#348: Corrections to model examples, changing hint comm…
Browse files Browse the repository at this point in the history 
…ents to be more readable, adding a few extra comments to examples
  • Loading branch information
@addyosmani
addyosmani authored and David Amend committed Mar 29, 2013
1 parent fb04a95 commit fe6d7ca
Show file tree
Hide file tree
Showing 5 changed files with 84 additions and 56 deletions.
Binary file modified backbone-fundamentals.epub
View file
Binary file not shown.
35 changes: 21 additions & 14 deletions backbone-fundamentals.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9917,7 +9917,7 @@ For our models we want to at minimum test that:
module( 'About Backbone.Model');

test('Can be created with default values for its attributes.', function() {
expect( 1 );
expect( 3 );

var todo = new Todo();
equal( todo.get('text'), '' );
Expand All @@ -9926,7 +9926,7 @@ test('Can be created with default values for its attributes.', function() {
});

test('Will set attributes on the model instance when created.', function() {
expect( 3 );
expect( 1 );

var todo = new Todo( { text: 'Get oil change for car.' } );
equal( todo.get('text'), 'Get oil change for car.' );
Expand All @@ -9947,7 +9947,7 @@ test('Fires a custom event when the state changes.', function() {
var todo = new Todo();

todo.on( 'change', spy );
// How would you update a property on the todo here?
// Change the model state
todo.set( { text: 'new text' } );

ok( spy.calledOnce, 'A change event callback was correctly triggered' );
Expand All @@ -9961,7 +9961,7 @@ test('Can contain custom validation rules, and will trigger an invalid event on
var todo = new Todo();

todo.on('invalid', errorCallback);
// What would you need to set on the todo properties to cause validation to fail?
// Change the model state in such a way that validation will fail
todo.set( { done: 'not a boolean' } );

ok( errorCallback.called, 'A failed validation correctly triggered an error' );
Expand Down Expand Up @@ -10080,11 +10080,10 @@ test('Is backed by a model instance, which provides the data.', function() {
test('Can render, after which the DOM representation of the view will be visible.', function() {
this.todoView.render();

// Hint: render() just builds the DOM representation of the view, but doesn't insert it into the DOM.
// How would you append it to the ul#todoList?
// How do you access the view's DOM representation?

// Append the DOM representation of the view to ul#todoList
$('ul#todoList').append(this.todoView.el);

// Check the number of li items rendered to the list
equal($('#todoList').find('li').length, 1);
});

Expand All @@ -10099,15 +10098,14 @@ asyncTest('Can wire up view methods to DOM elements.', function() {

equal(viewElt.length > 0, true);

// Make sure that QUnit knows we can continue
// Ensure QUnit knows we can continue
start();
}, 1000, 'Expected DOM Elt to exist');


// Hint: How would you trigger the view, via a DOM Event, to toggle the 'done' status.
// (See todos.js line 70, where the events hash is defined.)

// Trigget the view to toggle the 'done' status on an item or items
$('#todoList li input.check').click();

// Check the done status for the model is true
equal( this.todoView.model.get('done'), true );
});
```
Expand All @@ -10134,14 +10132,23 @@ module( 'About Backbone Applications' , {
test('Should bootstrap the application by initializing the Collection.', function() {
expect( 2 );

// The todos collection should not be undefined
notEqual( this.App.todos, undefined );

// The initial length of our todos should however be zero
equal( this.App.todos.length, 0 );
});

test( 'Should bind Collection events to View creation.' , function() {
$('#new-todo').val( 'Foo' );

// Set the value of a brand new todo within the input box
$('#new-todo').val( 'Buy some milk' );

// Trigger the enter (return) key to be pressed inside #new-todo
// causing the new item to be added to the todos collection
$('#new-todo').trigger(new $.Event( 'keypress', { keyCode: 13 } ));

// The length of our collection should now be 1
equal( this.App.todos.length, 1 );
});
```
Expand Down
35 changes: 21 additions & 14 deletions backbone-fundamentals.rtf
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7682,7 +7682,7 @@ test('should find a model by id', function() \{\line
{\pard \ql \f0 \sa180 \li0 \fi0 \f1 module( 'About Backbone.Model');\line
\line
test('Can be created with default values for its attributes.', function() \{\line
expect( 1 );\line
expect( 3 );\line
\line
var todo = new Todo();\line
equal( todo.get('text'), '' );\line
Expand All @@ -7691,7 +7691,7 @@ test('Can be created with default values for its attributes.', function() \{\lin
\});\line
\line
test('Will set attributes on the model instance when created.', function() \{\line
expect( 3 );\line
expect( 1 );\line
\line
var todo = new Todo( \{ text: 'Get oil change for car.' \} );\line
equal( todo.get('text'), 'Get oil change for car.' );\line
Expand All @@ -7712,7 +7712,7 @@ test('Fires a custom event when the state changes.', function() \{\line
var todo = new Todo();\line
\line
todo.on( 'change', spy );\line
// How would you update a property on the todo here?\line
// Change the model state\line
todo.set( \{ text: 'new text' \} );\line
\line
ok( spy.calledOnce, 'A change event callback was correctly triggered' );\line
Expand All @@ -7726,7 +7726,7 @@ test('Can contain custom validation rules, and will trigger an invalid event on
var todo = new Todo();\line
\line
todo.on('invalid', errorCallback);\line
// What would you need to set on the todo properties to cause validation to fail?\line
// Change the model state in such a way that validation will fail\line
todo.set( \{ done: 'not a boolean' \} );\line
\line
ok( errorCallback.called, 'A failed validation correctly triggered an error' );\line
Expand Down Expand Up @@ -7828,11 +7828,10 @@ test('Is backed by a model instance, which provides the data.', function() \{\li
test('Can render, after which the DOM representation of the view will be visible.', function() \{\line
this.todoView.render();\line
\line
// Hint: render() just builds the DOM representation of the view, but doesn't insert it into the DOM.\line
// How would you append it to the ul#todoList?\line
// How do you access the view's DOM representation?\line
\line
// Append the DOM representation of the view to ul#todoList\line
$('ul#todoList').append(this.todoView.el);\line
\line
// Check the number of li items rendered to the list\line
equal($('#todoList').find('li').length, 1);\line
\});\line
\line
Expand All @@ -7847,15 +7846,14 @@ asyncTest('Can wire up view methods to DOM elements.', function() \{\line
\line
equal(viewElt.length > 0, true);\line
\line
// Make sure that QUnit knows we can continue\line
// Ensure QUnit knows we can continue\line
start();\line
\}, 1000, 'Expected DOM Elt to exist');\line
\line
\line
// Hint: How would you trigger the view, via a DOM Event, to toggle the 'done' status.\line
// (See todos.js line 70, where the events hash is defined.)\line
\line
// Trigget the view to toggle the 'done' status on an item or items\line
$('#todoList li input.check').click();\line
\line
// Check the done status for the model is true\line
equal( this.todoView.model.get('done'), true );\line
\});\par}
{\pard \ql \f0 \sa180 \li0 \fi0 \b \fs28 App\par}
Expand All @@ -7876,14 +7874,23 @@ asyncTest('Can wire up view methods to DOM elements.', function() \{\line
test('Should bootstrap the application by initializing the Collection.', function() \{\line
expect( 2 );\line
\line
// The todos collection should not be undefined\line
notEqual( this.App.todos, undefined );\line
\line
// The initial length of our todos should however be zero\line
equal( this.App.todos.length, 0 );\line
\});\line
\line
test( 'Should bind Collection events to View creation.' , function() \{\line
$('#new-todo').val( 'Foo' );\line
\line
// Set the value of a brand new todo within the input box\line
$('#new-todo').val( 'Buy some milk' );\line
\line
// Trigger the enter (return) key to be pressed inside #new-todo\line
// causing the new item to be added to the todos collection\line
$('#new-todo').trigger(new $.Event( 'keypress', \{ keyCode: 13 \} ));\line
\line
// The length of our collection should now be 1\line
equal( this.App.todos.length, 1 );\line
\});\par}
{\pard \ql \f0 \sa180 \li0 \fi0 \b \fs32 Further Reading & Resources\par}
Expand Down
35 changes: 21 additions & 14 deletions chapters/13-sinonjs.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -265,7 +265,7 @@ For our models we want to at minimum test that:
module( 'About Backbone.Model');

test('Can be created with default values for its attributes.', function() {
expect( 1 );
expect( 3 );

var todo = new Todo();
equal( todo.get('text'), '' );
Expand All @@ -274,7 +274,7 @@ test('Can be created with default values for its attributes.', function() {
});

test('Will set attributes on the model instance when created.', function() {
expect( 3 );
expect( 1 );

var todo = new Todo( { text: 'Get oil change for car.' } );
equal( todo.get('text'), 'Get oil change for car.' );
Expand All @@ -295,7 +295,7 @@ test('Fires a custom event when the state changes.', function() {
var todo = new Todo();

todo.on( 'change', spy );
// How would you update a property on the todo here?
// Change the model state
todo.set( { text: 'new text' } );

ok( spy.calledOnce, 'A change event callback was correctly triggered' );
Expand All @@ -309,7 +309,7 @@ test('Can contain custom validation rules, and will trigger an invalid event on
var todo = new Todo();

todo.on('invalid', errorCallback);
// What would you need to set on the todo properties to cause validation to fail?
// Change the model state in such a way that validation will fail
todo.set( { done: 'not a boolean' } );

ok( errorCallback.called, 'A failed validation correctly triggered an error' );
Expand Down Expand Up @@ -428,11 +428,10 @@ test('Is backed by a model instance, which provides the data.', function() {
test('Can render, after which the DOM representation of the view will be visible.', function() {
this.todoView.render();

// Hint: render() just builds the DOM representation of the view, but doesn't insert it into the DOM.
// How would you append it to the ul#todoList?
// How do you access the view's DOM representation?

// Append the DOM representation of the view to ul#todoList
$('ul#todoList').append(this.todoView.el);

// Check the number of li items rendered to the list
equal($('#todoList').find('li').length, 1);
});

Expand All @@ -447,15 +446,14 @@ asyncTest('Can wire up view methods to DOM elements.', function() {

equal(viewElt.length > 0, true);

// Make sure that QUnit knows we can continue
// Ensure QUnit knows we can continue
start();
}, 1000, 'Expected DOM Elt to exist');


// Hint: How would you trigger the view, via a DOM Event, to toggle the 'done' status.
// (See todos.js line 70, where the events hash is defined.)

// Trigget the view to toggle the 'done' status on an item or items
$('#todoList li input.check').click();

// Check the done status for the model is true
equal( this.todoView.model.get('done'), true );
});
```
Expand All @@ -482,14 +480,23 @@ module( 'About Backbone Applications' , {
test('Should bootstrap the application by initializing the Collection.', function() {
expect( 2 );

// The todos collection should not be undefined
notEqual( this.App.todos, undefined );

// The initial length of our todos should however be zero
equal( this.App.todos.length, 0 );
});

test( 'Should bind Collection events to View creation.' , function() {
$('#new-todo').val( 'Foo' );

// Set the value of a brand new todo within the input box
$('#new-todo').val( 'Buy some milk' );

// Trigger the enter (return) key to be pressed inside #new-todo
// causing the new item to be added to the todos collection
$('#new-todo').trigger(new $.Event( 'keypress', { keyCode: 13 } ));

// The length of our collection should now be 1
equal( this.App.todos.length, 1 );
});
```
Expand Down
35 changes: 21 additions & 14 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7758,7 +7758,7 @@ <h3 id="models-3"><a href="#TOC">Models</a></h3>
<pre class="sourceCode javascript"><code class="sourceCode javascript">module( <span class="ch">&#39;About Backbone.Model&#39;</span>);

test(<span class="ch">&#39;Can be created with default values for its attributes.&#39;</span>, <span class="kw">function</span>() {
expect( <span class="dv">1</span> );
expect( <span class="dv">3</span> );

<span class="kw">var</span> todo = <span class="kw">new</span> Todo();
equal( <span class="kw">todo</span>.<span class="fu">get</span>(<span class="ch">&#39;text&#39;</span>), <span class="ch">&#39;&#39;</span> );
Expand All @@ -7767,7 +7767,7 @@ <h3 id="models-3"><a href="#TOC">Models</a></h3>
});

test(<span class="ch">&#39;Will set attributes on the model instance when created.&#39;</span>, <span class="kw">function</span>() {
expect( <span class="dv">3</span> );
expect( <span class="dv">1</span> );

<span class="kw">var</span> todo = <span class="kw">new</span> Todo( { <span class="dt">text</span>: <span class="ch">&#39;Get oil change for car.&#39;</span> } );
equal( <span class="kw">todo</span>.<span class="fu">get</span>(<span class="ch">&#39;text&#39;</span>), <span class="ch">&#39;Get oil change for car.&#39;</span> );
Expand All @@ -7788,7 +7788,7 @@ <h3 id="models-3"><a href="#TOC">Models</a></h3>
<span class="kw">var</span> todo = <span class="kw">new</span> Todo();

<span class="kw">todo</span>.<span class="fu">on</span>( <span class="ch">&#39;change&#39;</span>, spy );
<span class="co">// How would you update a property on the todo here?</span>
<span class="co">// Change the model state</span>
<span class="kw">todo</span>.<span class="fu">set</span>( { <span class="dt">text</span>: <span class="ch">&#39;new text&#39;</span> } );

ok( <span class="kw">spy</span>.<span class="fu">calledOnce</span>, <span class="ch">&#39;A change event callback was correctly triggered&#39;</span> );
Expand All @@ -7802,7 +7802,7 @@ <h3 id="models-3"><a href="#TOC">Models</a></h3>
<span class="kw">var</span> todo = <span class="kw">new</span> Todo();

<span class="kw">todo</span>.<span class="fu">on</span>(<span class="ch">&#39;invalid&#39;</span>, errorCallback);
<span class="co">// What would you need to set on the todo properties to cause validation to fail?</span>
<span class="co">// Change the model state in such a way that validation will fail</span>
<span class="kw">todo</span>.<span class="fu">set</span>( { <span class="dt">done</span>: <span class="ch">&#39;not a boolean&#39;</span> } );

ok( <span class="kw">errorCallback</span>.<span class="fu">called</span>, <span class="ch">&#39;A failed validation correctly triggered an error&#39;</span> );
Expand Down Expand Up @@ -7908,11 +7908,10 @@ <h3 id="views-3"><a href="#TOC">Views</a></h3>
test(<span class="ch">&#39;Can render, after which the DOM representation of the view will be visible.&#39;</span>, <span class="kw">function</span>() {
<span class="kw">this</span>.<span class="fu">todoView</span>.<span class="fu">render</span>();

<span class="co">// Hint: render() just builds the DOM representation of the view, but doesn&#39;t insert it into the DOM.</span>
<span class="co">// How would you append it to the ul#todoList?</span>
<span class="co">// How do you access the view&#39;s DOM representation?</span>

<span class="co">// Append the DOM representation of the view to ul#todoList</span>
$(<span class="ch">&#39;ul#todoList&#39;</span>).<span class="fu">append</span>(<span class="kw">this</span>.<span class="fu">todoView</span>.<span class="fu">el</span>);

<span class="co">// Check the number of li items rendered to the list</span>
equal($(<span class="ch">&#39;#todoList&#39;</span>).<span class="fu">find</span>(<span class="ch">&#39;li&#39;</span>).<span class="fu">length</span>, <span class="dv">1</span>);
});

Expand All @@ -7927,15 +7926,14 @@ <h3 id="views-3"><a href="#TOC">Views</a></h3>

equal(<span class="kw">viewElt</span>.<span class="fu">length</span> &gt; <span class="dv">0</span>, <span class="kw">true</span>);

<span class="co">// Make sure that QUnit knows we can continue</span>
<span class="co">// Ensure QUnit knows we can continue</span>
start();
}, <span class="dv">1000</span>, <span class="ch">&#39;Expected DOM Elt to exist&#39;</span>);


<span class="co">// Hint: How would you trigger the view, via a DOM Event, to toggle the &#39;done&#39; status.</span>
<span class="co">// (See todos.js line 70, where the events hash is defined.)</span>

<span class="co">// Trigget the view to toggle the &#39;done&#39; status on an item or items</span>
$(<span class="ch">&#39;#todoList li input.check&#39;</span>).<span class="fu">click</span>();

<span class="co">// Check the done status for the model is true</span>
equal( <span class="kw">this</span>.<span class="fu">todoView</span>.<span class="fu">model</span>.<span class="fu">get</span>(<span class="ch">&#39;done&#39;</span>), <span class="kw">true</span> );
});</code></pre>
<h3 id="app"><a href="#TOC">App</a></h3>
Expand All @@ -7956,14 +7954,23 @@ <h3 id="app"><a href="#TOC">App</a></h3>
test(<span class="ch">&#39;Should bootstrap the application by initializing the Collection.&#39;</span>, <span class="kw">function</span>() {
expect( <span class="dv">2</span> );

<span class="co">// The todos collection should not be undefined</span>
notEqual( <span class="kw">this</span>.<span class="fu">App</span>.<span class="fu">todos</span>, undefined );

<span class="co">// The initial length of our todos should however be zero</span>
equal( <span class="kw">this</span>.<span class="fu">App</span>.<span class="fu">todos</span>.<span class="fu">length</span>, <span class="dv">0</span> );
});

test( <span class="ch">&#39;Should bind Collection events to View creation.&#39;</span> , <span class="kw">function</span>() {
$(<span class="ch">&#39;#new-todo&#39;</span>).<span class="fu">val</span>( <span class="ch">&#39;Foo&#39;</span> );

<span class="co">// Set the value of a brand new todo within the input box</span>
$(<span class="ch">&#39;#new-todo&#39;</span>).<span class="fu">val</span>( <span class="ch">&#39;Buy some milk&#39;</span> );

<span class="co">// Trigger the enter (return) key to be pressed inside #new-todo</span>
<span class="co">// causing the new item to be added to the todos collection</span>
$(<span class="ch">&#39;#new-todo&#39;</span>).<span class="fu">trigger</span>(<span class="kw">new</span> $.<span class="fu">Event</span>( <span class="ch">&#39;keypress&#39;</span>, { <span class="dt">keyCode</span>: <span class="dv">13</span> } ));

<span class="co">// The length of our collection should now be 1</span>
equal( <span class="kw">this</span>.<span class="fu">App</span>.<span class="fu">todos</span>.<span class="fu">length</span>, <span class="dv">1</span> );
});</code></pre>
<h2 id="further-reading-resources"><a href="#TOC">Further Reading &amp; Resources</a></h2>
Expand Down

0 comments on commit fe6d7ca

Please sign in to comment.