如何使用不同的控制器在Ember.js中更新hasMany？

Question

如何使用不同的控制器在Ember.js中更新hasMany？

你好

我有Ruby on Rails 4.0.3應用程序，正在使用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 

我想使用不同的控制器在同一視圖中顯示hasMany 。

我在StackOverflow上看到了一些示例，但是其中大多數（如果不是全部）都是用於顯示記錄的。

好吧，談話很便宜，我在顯示代碼：

楷模：

-javascripts /模型/ task.js

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

-javascripts /模型/ list.js

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

路由器：

-javascripts / router.js

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

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

控制器：

-javascripts /控制器/ 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 /控制器/ 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 /控制器/ task_controller.js

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

模板：

-javascripts / templates / lists.handlebars [片段]

  {{#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}}

---

但是看起來isEditingTask屬性不起作用...

任何想法如何解決？

Answer 1

確定找到了解決方案，只需將itemController添加到each循環的任務中

{{#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