Question

我正在研究Ember.js的入门教程。我来到这里：

http://emberjs.com/guides/getting-started/display-a-button-to-remove-completed-todos/

出于某种原因，我无法通过按钮删除要显示的已完成的待办事项。我已检查过代码，无法弄清问题是什么。

以下是index.html页面上按钮的HTML：

{{#if hasCompleted}}
  <button id="clear-completed" {{action "clearCompleted"}}>
  Clear completed ({{completed}})
  </button>
{{/if}}

我确实对todos_controller进行了一些更改：

Todos.TodosController = Ember.ArrayController.extend({
  actions: {

    createTodo: function() {
      // Get the todo title set by the "New Todo" text field
      var title = this.get('newTitle');
      if (!title.trim()) { return; }

      // Create the new Todo model
      var todo = this.store.createRecord('todo', {
        title: title,
        isCompleted: false
      });

      // Clear the "New Todo" text field
      this.set('newTitle', '');

      // Save the new model
      todo.save();
    },

    clearCompleted: function() {
      var completed = this.filterBy('isCompleted', true);
      completed.invoke('deleteRecord');
      completed.invoke('save');
    },

    remaining: function() {
      return this.filterBy('isCompleted', false).get('length');
    }.property('@each.isCompleted'),

    inflection: function() {
      var remaining = this.get('remaining');
      return remaining === 1 ? 'item' : 'items';
    }.property('remaining'),

    hasCompleted: function() {
      return this.get('completed') > 0;
    }.property('completed'),

    completed: function() {
      return this.filterBy('isCompleted', true).get('length');
    }.property('@each.isCompleted'),

  }
});

我试图在JSFiddle中展示这些变化，但我无法让应用程序在JSFiddle上运行。无论如何你想要看，这里是链接：

http://jsfiddle.net/cspears2002/pQ5AN/9/

Answer 1

您的计算属性应该在操作哈希

之外

http://emberjs.jsbin.com/ILEZAsU/1/edit

actions: {

    createTodo: function() {
      // Get the todo title set by the "New Todo" text field
      var title = this.get('newTitle');
      if (!title.trim()) { return; }

      // Create the new Todo model
      var todo = this.store.createRecord('todo', {
        title: title,
        isCompleted: false
      });

      // Clear the "New Todo" text field
      this.set('newTitle', '');

      // Save the new model
      todo.save();
    },

    clearCompleted: function() {
      var completed = this.filterBy('isCompleted', true);
      completed.invoke('deleteRecord');
      completed.invoke('save');
    },
  },

  remaining: function() {
    return this.filterBy('isCompleted', false).get('length');
  }.property('@each.isCompleted'),

  inflection: function() {
    var remaining = this.get('remaining');
    return remaining === 1 ? 'item' : 'items';
  }.property('remaining'),

  hasCompleted: function() {
    return this.get('completed') > 0;
  }.property('completed'),

  completed: function() {
    return this.filterBy('isCompleted', true).get('length');
  }.property('@each.isCompleted'),

试图让按钮显示在Ember.js中

1 个答案: