如何在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上看到过一些例子，但大多数(如果不是全部)都是用来显示记录的。

好吧，说话很便宜，我正在展示代码:

模型:

的javascript/模型/task.js

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

的javascript/模型/list.js

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

路由器:

的javascript/router.js

EmTasks.Router.map(function(){
  return this.route("lists", {
    path: '/'
  });
});
EmTasks.ListsRoute = Ember.Route.extend({
  model: function() {
    return this.store.find('list');
  }
});

控制器:

的javascript/控制器/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();
      });
    }
  },
});

的javascript/控制器/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
});

的javascript/控制器/task_controller.js

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

模板:

的javascript/模板/列表。车把(片段)

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