Question

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

这是代码：

待办事项/ 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>

待办事项/ 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

你应该注意模型的变化。@ each.isCompleted，todos不是你控制器的属性（它只是你计算属性中的局部变量）。

计算机财产不起作用

1 个答案: