Observing changes to an ItemController in Array Controller

Question

I've been learning ember by recreating the TodoMVC in EmberCli. Ive recreated all the functionality, but I ran into an issue and I was hoping someone could shed some light on the situation.

It seems that my Todos ArrayController will observe and fire functions when properties in my model change but not when values in my Todo ObjectController change.

I moved isEditing into the Model so that when I call editTodo canToggle fires. But I would prefer to store that value in my controller and not the model.

I set up a test with with a propTest boolean. on a button click I fire propTogglebut todoPropToggle doesn't respond to the change. The only time that it does ever fire is on initialization.

Any insight would be super helpful.

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

TODO 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')
});

Deewendra Shrestha Deewendra Shrestha · Accepted Answer · 2014-09-10T20:54:21

How about an alternative approach? We could toggle 'canToggle' in arrayController directly from the object controller by either using parentController or specifying needs. Avoids having to observer all the itemControllers which should be more efficient too.

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

TODO 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')
});

I have not tested it, but I hope you get the jist of the solution I am proposing.

Observing changes to an ItemController in Array Controller

2 Answers