ember 组件在 {{#each}} 中通过引用传递参数

Question

跟随这个 CodePen可能会有所帮助。 单击图标。

我有一个项目列表，每个项目都使用 ItemIndexComponent 呈现，它有一个属性， controls ，这是一个对象数组，每个对象描述一个要显示的图标、要采取的操作和一个状态（真/假）。 这个想法是将控件传递到一个可配置的 ToolboxMenuComponent 中，该组件没有任何关于要执行的操作或要显示的图标的逻辑。 它接收来自其子组件的单击，该子组件向上传递相应的控件对象。

然后，工具箱在将控件与项目一起传递之前切换控件上的状态，进一步沿链向上传递到 ItemIndexComponent。 然后检查控件以查看要更改项目的哪个属性。 一切都很好，除了......

我遇到的问题是相同的controls数组传递给每个项目。 因此，如果我单击编辑图标，该项目的“编辑”属性会发生变化——颜色变为绿色。 但是当我单击任何其他项目的编辑图标时，没有任何反应，因为“编辑”控制状态已经为true ，随后被切换，然后向上发送链，导致第二个项目没有更改，其状态已经是false 。 如果我再次单击第二个项目的图标，它当然会发生变化，因为之前状态已被切换。

我明白发生了什么，但我很想弄清楚如何用 Ember 处理这个问题。 如何在保持工具箱不可知的同时传递每个项目自己的控件数组？ 也就是说，我希望它只知道controls具有这三个属性，该state应该被切换，并且它应该传回item并且不知道关于item任何信息，也不知道切换item属性本身。 但是每个item都应该有自己的controls ，因此每个控件都有自己的状态。

Answer 1

我发誓，每次我向 SO 发帖时，都是经过几个小时的徒劳。 然后，在整理问题的同时，我进行了六次尝试。 然后我发帖，解决方案让我目瞪口呆。

因为 ToolboxMenu 已经知道 state 属性，所以使用它没有坏处。 答案是根据controls.state 在子ToolboxMenuItem 上设置一个实例属性，然后切换它并将其向上传递。 现在， controls.state变为defaultState ，精确使用一次然后被忽略。 只需要传递动作，而不是整个控制对象。

（我不得不使用mode作为子组件属性，因为 Ember 抱怨一个已弃用的state成员。）

App.ToolboxMenuComponent = Ember.Component.extend({
  actions: {
    toggleTool: function(action, mode) {
      this.sendAction("action", this.get("item"), action, mode);
    }
  }
});

App.ToolboxMenuItemComponent = Ember.Component.extend({
  mode: null,
  didInsertElement: function() {
    this.set("mode", this.get("control").defaultState);
  },
  actions: {
    click: function() {
      let mode = this.get("mode");
      this.set("mode", !mode);
      this.sendAction("action", this.get("control").action, this.get("mode"));
    }
  }
});