Trying to get button to display in Ember.js

Question

I am working on the Getting Started tutorial for Ember.js. I made it to here:

http://emberjs.com/guides/getting-started/display-a-button-to-remove-completed-todos/

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.

Here is the HTML for the button on the index.html page:

{{#if hasCompleted}}
  <button id="clear-completed" {{action "clearCompleted"}}>
  Clear completed ({{completed}})
  </button>
{{/if}}

I did make some changes to the todos_controller:

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') > 0;
    }.property('completed'),

    completed: function() {
      return this.filterBy('isCompleted', true).get('length');
    }.property('@each.isCompleted'),

  }
});

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:

http://jsfiddle.net/cspears2002/pQ5AN/9/

Answer 1

Your computed properties should be outside the actions hash

http://emberjs.jsbin.com/ILEZAsU/1/edit

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') > 0;
  }.property('completed'),

  completed: function() {
    return this.filterBy('isCompleted', true).get('length');
  }.property('@each.isCompleted'),