javascript - 尝试让按钮在 Ember.js 中显示

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'),