javascript - 观察数组 Controller 中 ItemController 的变化

Question

我一直在通过在 EmberCli 中重新创建 TodoMVC 来学习 Ember。我已经重新创建了所有功能，但遇到了一个问题，我希望有人能够阐明这一情况。

看起来，当我的模型中的属性发生变化时，我的 Todos ArrayController 会观察并触发函数，但当我的 Todo ObjectController 中的值发生变化时，它不会观察并触发函数。

我将 isEditing 移动到模型中，以便当我调用 editTodo canToggle 时会触发。但我更愿意将该值存储在我的 Controller 中而不是模型中。

我使用 propTest bool 值设置了测试。单击按钮时，我触发 propToggle 但 todoPropToggle 不响应更改。它唯一触发的时间是初始化时。

任何见解都会非常有帮助。

TODOS Controller

import Ember from 'ember';
export default Ember.ArrayController.extend({
actions: {
  createTodo: function() {
    var title = this.get('newTitle');
    if (!title.trim()) {
      return;
    }
    var todo = this.store.createRecord('todo', {
      title: title,
      isCompleted: false,
      isEditing:false
    });

    this.set('newTitle', '');
    todo.save();
    }
  },

  canToggle: function() {
    var isEditing = this.isAny('isEditing');
    return this.get('length') && !isEditing;
  }.property('length','@each.isEditing'),

  todoPropToggle: function() {
    var hasPropTest = this.isAny('propTest');
    return hasPropTest;
  }.property('@each.propTest')
});

待办事项 Controller

import Ember from 'ember';

export default Ember.ObjectController.extend({

  actions: {
    editTodo: function() {
      var todo = this.get('model');
      todo.set('isEditing', true);
    },

    removeTodo: function() {
      var todo = this.get('model');
      todo.deleteRecord();
      todo.save();
    },

    acceptChanges: function() {
      var todo = this.get('model');
      todo.set('isEditing', false);
      if (Ember.isEmpty(this.get('model.title'))) {
        this.send('removeTodo');
      }
      else {
        this.get('model').save();
      }
    },

    propToggle:function(){
      this.set('propTest',!this.get('propTest'));
    }
  },

  propTest:true,

  isCompleted: function(key, value) {
    var model = this.get('model');
    if (value === undefined) {
      return model.get('isCompleted');
    }
    else {
      model.set('isCompleted', value);
      model.save();
      return value;
    }
  }.property('model.isCompleted')
});

Answer 1

另一种方法怎么样？我们可以通过使用parentController 或指定需求，直接从对象 Controller 切换arrayController 中的“canToggle”。避免必须观察所有 itemController，这也应该更高效。

TODOS Controller :

import Ember from 'ember';
export default
Ember.ArrayController.extend({
    /**
    * references the todo model that is currently being edited
    */
    editingTodo: null,
    canToggle: Ember.computed.notEmpty('editingTodo'),

    actions: {
        createTodo: function () {
            var title = this.get('newTitle');
            if (!title.trim()) {
                return;
            }
            var todo = this.store.createRecord('todo', {
                title: title,
                isCompleted: false,
                isEditing: false
            });

            this.set('newTitle', '');
            todo.save();
        }
    }
});

待办事项 Controller

import Ember from 'ember';

export default
Ember.ObjectController.extend({

    needs:['todos']
    todos : Ember.computed.alias('controllers.todos'),

    actions: {
        editTodo: function () {
            this.set('todos.editingTodo', this.get('model'));
        },

        removeTodo: function () {
            var todo = this.get('model');
            if (this.get('todos.editingTodo') === todo) {
                this.set('todos.editingTodo', null);
            }
            todo.deleteRecord();
            todo.save();
        },

        acceptChanges: function () {
            this.set('todos.editingTodo', null);
            if (Ember.isEmpty(this.get('model.title'))) {
                this.send('removeTodo');
            }
            else {
                this.get('model').save();
            }
        }
    },

    isCompleted: function (key, value) {
        var model = this.get('model');
        if (value === undefined) {
            return model.get('isCompleted');
        }
        else {
            model.set('isCompleted', value);
            model.save();
            return value;
        }
    }.property('model.isCompleted')
});

我尚未对其进行测试，但我希望您能了解我提出的解决方案的要点。