ember.js - 计算属性不起作用

Question

我正在编写待办事项应用程序，但无法使计算属性正常工作。我想在 todos/index 控制器中实现计算属性，以便模板可以适当地显示剩余未完成的 todos 数量（基于模型的 isCompleted 属性）。

这是代码：

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();
    }
  }
});

如果有帮助：https ://github.com/FranGoitia/todo

谢谢。

Answer 1

您应该注意 model.@each.isCompleted 上的更改，todos 不是您的控制器的属性（它只是您计算属性中的一个局部变量）。