Computed Property not working


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:


{{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"}}

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

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

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


import Ember from 'ember';

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

In case it helps:



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.