Computed Property not working - ember.js

Question

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>
All
</li>
<li>
Active
</li>
<li>
Completed
</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.

Answer 1

You should be watching for changes on model.#each.isCompleted, todos is not a property of your controller (it's just a local variable inside your computed property).