javascript - 操作需要识别 {{#each}} 列表中的动态项

Question

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

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

查看:

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

这是我在循环中放置操作的位置。假设有 10 个 listItem。

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

重申一下，当我单击“turnThisGreen”操作时，我希望该元素(即我在列出的 10 个元素中单击的第 1 个元素)变为绿色。 this.$() 并没有为我做这件事。

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

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

Answer 1

我认为您遇到的问题是 Ember 故意使直接 DOM 操作变得困难。通常，您不应该这样做。因此，假设这不是您实际问题的严重简化，您可以通过绑定(bind) CSS 类来更改颜色。正如哈西卜·马哈茂德所说，use an item controller .

在您的模板中:

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

你的 Controller 应该看起来像这样:

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

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