动态更改Ember中的CSS类

Question

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

我做了一个组件，就像这样：

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

我通过point，它有两个坐标属性：model.xCoordinate和model.yCoordinate。

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

//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}}

我知道:恶心。有更好的方法吗？我应该做把手吗？行动？如果有人能把我引向总方向，我就可以从那里接下去。非常感谢！

Answer 1

看看我的答案，here。

也许你要找的就是ember-css-properties。另一个选项是帮助程序或计算属性。

助手可以提供此API：

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

在默认情况下，甚至假定为px：

<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;
    `);
  }
}),

小心:对于所有这些内容(ember-css-properties除外)，您需要理解其含义：

如果用户可以将mapPoint.xCoordinate 或 mapPoint.yCoordinate 操作到意想不到的值，您可能会打开一个安全漏洞！！

Answer 2

您不需要在concat类型元素中使用<>助手。你可以这样做

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

但是对于{{}}块，您需要使用concat

{{my-component style=(concat 'left: ' mapPoint.xCoordinate 'px; top: ' mapPoint.yCoordinate 'px;')}}

此外，如果我是正确的，您只需要做html安全，如果您有标记在您的字符串。

请参阅escaping-html-content