Action 需要识别 {{#each}} 列表中的动态项目答案

【问题标题】：Action needs to recognize dynamic items in an {{#each}} listAction 需要识别 {{#each}} 列表中的动态项目
【发布时间】：2014-11-12 17:36:49
【问题描述】：

我有一个附加到列表项的操作，然后循环多次，我希望该操作识别它附加到哪个列表项。

这是动作的定义。请注意，我误用了 this.$()，因为我现在认识到它只适用于组件

查看：

actions: {
    turnThisGreen:function() {
    this.$().css('background-color', 'green');
  }
}

这是我在循环中放置动作的地方。假设有 10 个列表项。

{{#each listItems}}   
  <div {{action 'turnThisGreen' target="view" this=this bubbles=false}} class="inspectionTypeHeader">
    {{inspectionType.typeName}}
  </div> 
{{/each}}

所以重申一下，当我单击操作“turnThisGreen”时，我希望该元素（即我在列出的 10 个元素中单击的第一个元素）变为绿色。 this.$() 不是为我做的。

我知道 this.$() 可以与组件一起使用，但这似乎是一个巨大的变通方法。

有人可以向我解释一下并提供解决方案吗？

【问题讨论】：

对迭代项使用objectController。
就像将动作的定义加载到对象控制器而不是视图中，并使用 this.$() 来调用它？

标签： javascript html ember.js action

【解决方案1】：

我认为您遇到的问题是 Ember 故意使直接 DOM 操作变得困难。很多时候，你不应该那样做。因此，假设这不是对您的实际问题的严重简化，您可以通过绑定 CSS 类来更改颜色。正如 Hasib Mahmud 所说，use an item controller.

在您的模板中：

{{#each listItems itemController='listItem'}}
    <div {{action 'turnGreen'}} {{bind-attr class='isGreen:green'}}>
        {{inspectionType.typeName}}
    </div>
{{/each}}

你的控制器应该是这样的：

App.ListItemController = Ember.ObjectController.extend({
    isGreen: false,
    actions: {
        turnGreen: function() {
            this.set('isGreen', true);
        }
    }
});

这样，每当您触发操作时，green 类将添加到您的 div，然后您可以使用它通过 CSS 将文本变为绿色。

【讨论】：