title: Trying to get button to display in Ember.js
body: <p>I am working on the Getting Started tutorial for Ember.js.  I made it to here:</p>
  
  <p><a href="http://emberjs.com/guides/getting-started/display-a-button-to-remove-completed-todos/" rel="nofollow">http://emberjs.com/guides/getting-started/display-a-button-to-remove-completed-todos/</a></p>
  
  <p>For some reason, I cannot get the button to remove completed todos to display.  I have checked over the code and cannot figure out what the issue is.</p>
  
  <p>Here is the HTML for the button on the index.html page:</p>
  
  <pre><code>{{#if hasCompleted}}
    &lt;button id="clear-completed" {{action "clearCompleted"}}&gt;
    Clear completed ({{completed}})
    &lt;/button&gt;
  {{/if}}
  </code></pre>
  
  <p>I did make some changes to the todos_controller:</p>
  
  <pre><code>Todos.TodosController = Ember.ArrayController.extend({
    actions: {
  
      createTodo: function() {
        // Get the todo title set by the "New Todo" text field
        var title = this.get('newTitle');
        if (!title.trim()) { return; }
  
        // Create the new Todo model
        var todo = this.store.createRecord('todo', {
          title: title,
          isCompleted: false
        });
  
        // Clear the "New Todo" text field
        this.set('newTitle', '');
  
        // Save the new model
        todo.save();
      },
  
      clearCompleted: function() {
        var completed = this.filterBy('isCompleted', true);
        completed.invoke('deleteRecord');
        completed.invoke('save');
      },
  
      remaining: function() {
        return this.filterBy('isCompleted', false).get('length');
      }.property('@each.isCompleted'),
  
      inflection: function() {
        var remaining = this.get('remaining');
        return remaining === 1 ? 'item' : 'items';
      }.property('remaining'),
  
      hasCompleted: function() {
        return this.get('completed') &gt; 0;
      }.property('completed'),
  
      completed: function() {
        return this.filterBy('isCompleted', true).get('length');
      }.property('@each.isCompleted'),
  
    }
  });
  </code></pre>
  
  <p>I tried to show off these changes in JSFiddle, but I cannot get the app to work on JSFiddle.  If you want to look anyway, here is the link:</p>
  
  <p><a href="http://jsfiddle.net/cspears2002/pQ5AN/9/" rel="nofollow">http://jsfiddle.net/cspears2002/pQ5AN/9/</a></p>