How to update hasMany in Ember.js using different controllers?

Question

How to update hasMany in Ember.js using different controllers?

Hi

I have Ruby on Rails 4.0.3 app and I am using Ember.js

DEBUG: Ember      : 1.6.0-beta.3 ember.js?body=1:3917
DEBUG: Ember Data : 1.0.0-beta.7+canary.f482da04 ember.js?body=1:3917
DEBUG: Handlebars : 1.3.0 ember.js?body=1:3917
DEBUG: jQuery     : 1.11.0 

I want to display hasMany in the same view using different controllers.

I have seen some example on StackOverflow but most (if not all) of them are for displaying records.

Ok talk is cheap, I am showing the code:

Models:

-javascripts/models/task.js

EmTasks.Task = DS.Model.extend({
  name: DS.attr('string'),
  description: DS.attr("string"),
  list: DS.belongsTo('list')
});

-javascripts/models/list.js

EmTasks.List = DS.Model.extend({
  name: DS.attr('string'),
  tasks: DS.hasMany('task')
});

Router:

-javascripts/router.js

EmTasks.Router.map(function(){
  return this.route("lists", {
    path: '/'
  });
});

EmTasks.ListsRoute = Ember.Route.extend({
  model: function() {
    return this.store.find('list');
  }
});

Controllers:

-javascripts/controllers/lists_controller.js

EmTasks.ListsController = Em.ArrayController.extend({
  addList: function() {
    this.store.createRecord('list', {
      name: this.get('newListName')
    }).save();
    return this.set('newListName', '');
  },

  destroyList: function(id) {
    if (confirm("Are you sure?")) {
      this.get('store').find('list', id).then( function(record) {
        record.destroyRecord();
      });
    }
  },
});

-javascripts/controllers/list_controller.js

EmTasks.ListController = Em.ObjectController.extend({
  actions: {
    editList: function() {
      this.set('isEditingList', true);
      var model = this.get('model')
    },
    acceptChanges: function () {
      this.set('isEditingList', false);
      var name = this.get('model.name');

      if (Ember.isEmpty(name)) {
        this.send('removeList');
      } else {
        var list = this.get('model')
        list.set('name', name);
        list.save()
      }
    },
    removeList: function () {
      var list = this.get('model');
      list.destroyRecord();
    }
  },
  isEditingList: false
});

-javascripts/controllers/task_controller.js

EmTasks.TaskController = Em.ObjectController.extend({
  isEditingTask: false
});

Templates:

-javascripts/templates/lists.handlebars [fragment]

  {{#each itemController='list'}}

    <div class='col-md-8'>
      <h3>
        {{#if isEditingList}}
          {{edit-input class="form-control" value=name focus-out="acceptChanges" insert-newline="acceptChanges"}}
        {{else}}
          <div {{action 'editList' on='doubleClick'}}>
            {{name}}
          </div>
        {{/if}}
      </h3>
    </div>

    <div class='col-md-4 down13p'>
      <button class="btn btn-danger btn-small pull-right" {{action "destroyList" id}} type="button">
        <span class="glyphicon glyphicon-ban-circle"></span>
      </button>
    </div>

    {{#each task in this.tasks }}

      <div class="col-md-10">
        {{#if task.isEditingTask}}
          {{edit-input class="form-control" value=task.name focus-out="acceptChanges" insert-newline="acceptChanges"}}
        {{else}}
          <div {{action 'editList' on='doubleClick'}}>
            {{name}}
          </div>
        {{/if}}

---

But is looks like isEditingTask property is not working...

Any idea how to fix that?

Answer 1

OK found a solution, just add itemController to tasks each loop

{{#each task in this.tasks itemController='task' }}

  <div class="col-md-10">
    {{#if task.isEditingTask}}
      {{edit-input class="form-control" value=task.name focus-out="acceptChanges" insert-newline="acceptChanges"}}
    {{else}}
      <div {{action 'editTask' on='doubleClick'}}>
        {{name}}
      </div>
    {{/if}}

HTH