In Todos, don't re-render all items when unnecessary

Prior to this commit, any time the 'incompleteCount' field of a list
changes (due to a new task being added or a task marked complete),
we'd re-render the entire list of tasks.

examples/todos/client/templates/lists-show.html

@@ -53,14 +53,18 @@
 
     <div class="content-scrollable list-items">
       {{#if todosReady}}
-        {{#each todos}}
-          {{> todosItem}}
-        {{else}}
-          <div class="wrapper-message">
-            <div class="title-message">No tasks here</div>
-            <div class="subtitle-message">Add new tasks using the field above</div>
-          </div>
-        {{/each}}
+        {{#with _id}} {{! Establish new data context with only the '_id'
+                          field. This way, when the 'incompleteCount' field
+                          changes, we don't re-render the list contents }}
+          {{#each todos this}}
+            {{> todosItem}}
+          {{else}}
+            <div class="wrapper-message">
+              <div class="title-message">No tasks here</div>
+              <div class="subtitle-message">Add new tasks using the field above</div>
+            </div>
+          {{/each}}
+        {{/with}}
       {{else}}
           <div class="wrapper-message">
             <div class="title-message">Loading tasks...</div>
@@ -68,4 +72,4 @@
       {{/if}}
     </div>
   </div>
-</template>
+</template>

examples/todos/client/templates/lists-show.js

@@ -26,8 +26,8 @@ Template.listsShow.helpers({
     return Router.current().todosHandle.ready();
   },
 
-  todos: function() {
-    return Todos.find({listId: this._id}, {sort: {createdAt : -1}});
+  todos: function(listId) {
+    return Todos.find({listId: listId}, {sort: {createdAt : -1}});
   }
 });
 
@@ -157,4 +157,4 @@ Template.listsShow.events({
     Lists.update(this._id, {$inc: {incompleteCount: 1}});
     $input.val('');
   }
-});
+});