Question

超级，Ember的新手，如果这是直截了当的话，请道歉。我想知道在组件中呈现的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安全。

请参阅https://guides.emberjs.com/v3.1.0/templates/writing-helpers/#toc_escaping-html-content

动态更改Ember中的CSS类

2 个答案: