在Ember中动态更改CSS类

超级，超级新的余烬，所以道歉，如果这是直截了当的。我想知道动态更改组件中呈现的CSS类的属性的最佳方法

我制作了一个组件，如下所示：

//route_template.hbs
{{map-view point=model}}

我通过了点，它有两个坐标属性：

model.xCoordinate

，和

model.yccoordinate

这是我的组件模板。您可以看到，我目前正在使用此黑客内联样式设置页面上的点位置样式：

//component_template.hbs
{{#each point as |mapPoint|}}
   <i class="point-icon" style={{html-safe (concat 'left:' mapPoint.xCoordinate 'px; top:' mapPoint.yCoordinate 'px;')}}></i>
{{/each}}

//组件\u template.hbs
{{{#每个点作为{mapPoint}}
{{/每个}}

---

我知道：恶心。有更好的方法吗？我应该做一个把手助手吗？行动？如果有人能告诉我大致的方向，我可以从那里开始。非常感谢

您不需要在

类型元素中使用

concat

帮助程序。你可以这样做

<i class="point-icon" style="left: {{mapPoint.xCoordinate}}px; top: {{mapPoint.yCoordinate}}px;"></i>

另外，如果我是正确的，您只需要在字符串中有标记的情况下执行html安全

请看我的答案

可能就是你要找的。另一个选项是辅助对象或计算属性

助手可以提供以下API：

<i class="point-icon" style={{build-css
  left=(concat mapPoint.xCoordinate 'px')
  top=(concat mapPoint.yCoordinate 'px')
}}></i>

如果要使用计算属性，请在模板中执行以下操作：

<i class="point-icon" style={{myComputedStyle}}></i>

小心：对于所有这些（除了

ember css属性

），您需要理解其含义：

---

如果用户可以将

mapPoint.xCoordinate

或

mapPoint.yCoordinate

操纵为意外值，则可能会打开一个安全漏洞

我认为必须正确转义该值，否则您将收到一个弃用警告。我在Ember Twiddle中尝试过。没有收到任何警告。很有趣。。我可以发誓，只有在字符串中有标记时才需要html安全。在他的情况下，这只是数字。你有没有关于何时使用html安全的文档？我的意思是，如果我们遵循“不仅仅是为了标记”的规则，那么要为html属性包含字符串，就必须在任何地方都使用html安全。e、 g.

这个类也需要html安全吗？

<i class="point-icon" style={{build-css
  left=concat mapPoint.xCoordinate
  top=concat mapPoint.yCoordinate
}}></i>

<i class="point-icon" style={{myComputedStyle}}></i>

myComputedStyle: computed('mapPoint.{xCoordinate,yCoordinate}', {
  get() {
    return htmlSafe(`
      left: ${xCoordinate}px;
      top: ${yCoordinate}px;
    `);
  }
}),