Permalink
Browse files

Changed views/todos.js to views/todo.js

  • Loading branch information...
1 parent c23ef81 commit c9dfd5e78bf7d9df2d4ef8396f46901c5d7707b0 @stuartmemo stuartmemo committed Oct 20, 2012
View
@@ -4921,7 +4921,7 @@ index.html
todo.js
.../views
app.js
- todos.js
+ todo.js
.../collections
todos.js
.../templates
@@ -5114,7 +5114,7 @@ var TodoView = Backbone.View.extend({
is mapped to <literal>$</literal>).
</para>
<para>
- <emphasis role="strong">views/todos.js</emphasis>
+ <emphasis role="strong">views/todo.js</emphasis>
</para>
<programlisting language="javascript">
define([
@@ -5295,7 +5295,7 @@ define([
'underscore',
'backbone',
'collections/todos',
- 'views/todos',
+ 'views/todo',
'text!templates/stats.html'
], function($, _, Backbone, Todos, TodoView, statsTemplate){
@@ -1329,7 +1329,7 @@ Backbone LocalStorage adapter
<script src="js/lib/backbone-localstorage.js"></script>\line
<script src="js/models/todo.js"></script>\line
<script src="js/collections/todos.js"></script>\line
- <script src="js/views/todos.js"></script>\line
+ <script src="js/views/todo.js"></script>\line
<script src="js/views/app.js"></script>\line
<script src="js/routers/router.js"></script>\line
<script src="js/app.js"></script>\line
@@ -4438,7 +4438,7 @@ RequireJS docs
</script>\par}
{\pard \ql \f0 \sa180 \li0 \fi0 Whilst there is nothing wrong with the template itself, once we begin to develop larger applications requiring multiple templates, including them all in our markup on page-load can quickly become both unmanageable and come with performance costs. We\u8217'll look at solving this problem in a minute.\par}
{\pard \ql \f0 \sa180 \li0 \fi0 Let\u8217's now take a look at the AMD-version of our view. As discussed earlier, the \u8216'module\u8217' is wrapped using AMD\u8217's {\f1 define()} which allows us to specify the dependencies our view requires. Using the mapped paths to \u8216'jquery\u8217' etc. simplifies referencing common dependencies and instances of dependencies are themselves mapped to local variables that we can access (e.g \u8216'jquery\u8217' is mapped to {\f1 $}).\par}
-{\pard \ql \f0 \sa180 \li0 \fi0 {\b views/todos.js}\par}
+{\pard \ql \f0 \sa180 \li0 \fi0 {\b views/todo.js}\par}
{\pard \ql \f0 \sa180 \li0 \fi0 \f1 define([\line
'jquery',\line
'underscore',\line
@@ -4562,7 +4562,7 @@ RequireJS docs
'underscore',\line
'backbone',\line
'collections/todos',\line
- 'views/todos',\line
+ 'views/todo',\line
'text!templates/stats.html'\line
], function($, _, Backbone, Todos, TodoView, statsTemplate)\{\line
\line
View
@@ -1225,7 +1225,7 @@ <h2 id="index">Index</h2>
&lt;script src=&quot;js/lib/backbone-localstorage.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;js/models/todo.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;js/collections/todos.js&quot;&gt;&lt;/script&gt;
- &lt;script src=&quot;js/views/todos.js&quot;&gt;&lt;/script&gt;
+ &lt;script src=&quot;js/views/todo.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;js/views/app.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;js/routers/router.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;js/app.js&quot;&gt;&lt;/script&gt;
@@ -4096,7 +4096,7 @@ <h3 id="modularizing-our-models-views-and-collections">Modularizing our models,
&lt;/script&gt;</code></pre>
<p>Whilst there is nothing wrong with the template itself, once we begin to develop larger applications requiring multiple templates, including them all in our markup on page-load can quickly become both unmanageable and come with performance costs. We'll look at solving this problem in a minute.</p>
<p>Let's now take a look at the AMD-version of our view. As discussed earlier, the 'module' is wrapped using AMD's <code>define()</code> which allows us to specify the dependencies our view requires. Using the mapped paths to 'jquery' etc. simplifies referencing common dependencies and instances of dependencies are themselves mapped to local variables that we can access (e.g 'jquery' is mapped to <code>$</code>).</p>
-<p><strong>views/todos.js</strong></p>
+<p><strong>views/todo.js</strong></p>
<pre class="sourceCode javascript"><code class="sourceCode javascript">define([
<span class="ch">&#39;jquery&#39;</span>,
<span class="ch">&#39;underscore&#39;</span>,
@@ -4220,7 +4220,7 @@ <h3 id="modularizing-our-models-views-and-collections">Modularizing our models,
<span class="ch">&#39;underscore&#39;</span>,
<span class="ch">&#39;backbone&#39;</span>,
<span class="ch">&#39;collections/todos&#39;</span>,
- <span class="ch">&#39;views/todos&#39;</span>,
+ <span class="ch">&#39;views/todo&#39;</span>,
<span class="ch">&#39;text!templates/stats.html&#39;</span>
], <span class="kw">function</span>($, _, Backbone, Todos, TodoView, statsTemplate){
View
@@ -1732,7 +1732,7 @@ The first step is to setup the basic application dependencies, which in this cas
<script src="js/lib/backbone-localstorage.js"></script>
<script src="js/models/todo.js"></script>
<script src="js/collections/todos.js"></script>
- <script src="js/views/todos.js"></script>
+ <script src="js/views/todo.js"></script>
<script src="js/views/app.js"></script>
<script src="js/routers/router.js"></script>
<script src="js/app.js"></script>
@@ -2125,7 +2125,7 @@ Let’s look at the `TodoView` view, now. This will be in charge of individual T
```javascript
- // js/views/todos.js
+ // js/views/todo.js
var app = app || {};
@@ -5671,7 +5671,7 @@ Whilst there is nothing wrong with the template itself, once we begin to develop
Let's now take a look at the AMD-version of our view. As discussed earlier, the 'module' is wrapped using AMD's `define()` which allows us to specify the dependencies our view requires. Using the mapped paths to 'jquery' etc. simplifies referencing common dependencies and instances of dependencies are themselves mapped to local variables that we can access (e.g 'jquery' is mapped to `$`).
-**views/todos.js**
+**views/todo.js**
```javascript
define([
@@ -5819,7 +5819,7 @@ define([
'underscore',
'backbone',
'collections/todos',
- 'views/todos',
+ 'views/todo',
'text!templates/stats.html'
], function($, _, Backbone, Todos, TodoView, statsTemplate){
@@ -3,7 +3,7 @@ define([
'underscore',
'backbone',
'collections/todos',
- 'views/todos',
+ 'views/todo',
'text!templates/stats.html'
], function($, _, Backbone, Todos, TodoView, statsTemplate){
var AppView = Backbone.View.extend({
@@ -1,82 +0,0 @@
-define([
- 'jquery',
- 'underscore',
- 'backbone',
- 'text!templates/todos.html'
- ], function($, _, Backbone, todosTemplate){
- var TodoView = Backbone.View.extend({
-
- //... is a list tag.
- tagName: "li",
-
- // Cache the template function for a single item.
- template: _.template(todosTemplate),
-
- // The DOM events specific to an item.
- events: {
- "click .check" : "toggleDone",
- "dblclick div.todo-content" : "edit",
- "click span.todo-destroy" : "clear",
- "keypress .todo-input" : "updateOnEnter"
- },
-
- // 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
- // app, we set a direct reference on the model for convenience.
- initialize: function() {
- this.model.bind('change', this.render, this);
- this.model.view = this;
- },
-
- // Re-render the contents of the todo item.
- render: function() {
- $(this.el).html(this.template(this.model.toJSON()));
- this.setContent();
- return this;
- },
-
- // To avoid XSS (not that it would be harmful in this particular app),
- // we use `jQuery.text` to set the contents of the todo item.
- setContent: function() {
- var content = this.model.get('content');
- this.$('.todo-content').text(content);
- this.input = this.$('.todo-input');
- this.input.bind('blur', this.close, this);
- this.input.val(content);
- },
-
- // Toggle the `"done"` state of the model.
- toggleDone: function() {
- this.model.toggle();
- },
-
- // Switch this view into `"editing"` mode, displaying the input field.
- edit: function() {
- $(this.el).addClass("editing");
- this.input.focus();
- },
-
- // Close the `"editing"` mode, saving changes to the todo.
- close: function() {
- this.model.save({content: this.input.val()});
- $(this.el).removeClass("editing");
- },
-
- // If you hit `enter`, we're through editing the item.
- updateOnEnter: function(e) {
- if (e.keyCode == 13) this.close();
- },
-
- // Remove this view from the DOM.
- remove: function() {
- $(this.el).remove();
- },
-
- // Remove the item, destroy the model.
- clear: function() {
- this.model.clear();
- }
-
- });
- return TodoView;
-});

0 comments on commit c9dfd5e

Please sign in to comment.