Computed Property not working

1

Hello, I’m writing the todo app and I can’t get computed properties working. I want to implement computed properties in the todos/index controller so that the template can appropiately display the amount of todos undone remaining (based on the isCompleted attribute of the models).

This is the code:

todos/index.hbs

{{input type="text" id="new-todo" placeholder="What needs to be done?" value=newValue action="createTodo"}}

<section id="main">
    <ul id="todo-list">
        {{#each model as |todo|}}
            {{todo-item todo=todo edit="editTodo" destroy="destroyTodo"}}
        {{/each}}
    </ul>

    <input type="checkbox" id="toggle-all">
</section>


<footer id="footer">
    <span id="todo-count">
        <strong> {{remaining}} </strong> todos left
    </span>
    <ul id="filters">
        <li>
            <a href="all" class="selected">All</a>
        </li>
        <li>
            <a href="active">Active</a>
        </li>
        <li>
            <a href="completed">Completed</a>
        </li>
    </ul>

    <button id="clear-completed">
        Clear completed {{completed}}
    </button>
</footer>

todos/index.hbs

import Ember from 'ember';

export default Ember.ArrayController.extend({
  remaining: function() {
    var todos = this.get('model');
    return todos.filterBy('isCompleted', false).get('length');
  }.property('todos.@each.isCompleted'),
  completed: function() {
    var todos = this.get('model');
    return todos.filterBy('isCompleted', true).get('length');
  }.property('todos.@each.isCompleted'),
  actions: {
    createTodo: function() {
      this.get('newValue');
      var newTodo = this.store.createRecord('todo', {title: this.get('newValue'), isCompleted: false});
      this.set('newValue', '');
    },
    editTodo: function(todo) {
      if (Ember.isEmpty(todo.get('title'))) {
        this.send('destroyTodo', todo);
      }
      else {
        todo.save();
      }
    },
    destroyTodo: function(todo) {
      debugger;
      todo.deleteRecord();
    }
  }
});

In case it helps: https://github.com/FranGoitia/todo

Thanks.

2

The problem was that calling todos.@each.isCompleted makes no sense since todos is not a property of the controller but a variable scoped in the context of the function. Calling model.@each.isCompleted solves it.