ember 视图标签的 CSS答案

【问题标题】：CSS for ember view tagember 视图标签的 CSS
【发布时间】：2015-03-28 04:23:57
【问题描述】：

我想在视图类中为 ember 视图设置 z-index，但 ember 一直抛出错误：

DEPRECATION: Dynamic content in the `style` attribute is not escaped and may pose a security risk.

我的课程的缩写版本是这样的：

App.ModalComponent = Ember.Component.extend({
    layoutName: 'components/modal',
    classNames: ['modal', 'fade'],
    attributeBindings: ['style'],
    style: function() {
        return 'z-index:131071';
    }.property()
});

还有经验丰富的 ember 大师知道在 Ember 视图上设置自定义样式的更合适的方法吗？谢谢！

【问题讨论】：

以前没见过。试试return new Ember.Handlebars.SafeString('z-index: 131071') 看看是否会让人开心。或者，只需添加一个具有适当属性设置的类。
成功了 :) 谢谢。你想把它写在一个答案中，我会接受它以防其他人遇到这个问题？另外，您认为这值得提交错误报告吗？我没有太多为开源做贡献的经验，所以我不确定如何最好地帮助解决这个问题，或者它是否应该被视为一个问题。
警告：绑定样式属性可能会引入跨站脚本漏洞；请确保被绑定的值被正确转义。有关更多信息，包括如何禁用此警告，请参阅emberjs.com/deprecations/v1.x/#toc_binding-style-attributes。

标签： css ember.js

【解决方案1】：

这种“弃用”似乎是最新版本的 Ember 中新增的内容。就个人而言，我宁愿称其为“警告”，但无论如何。

解决方案是对其进行安全字符串处理：

style: function() {
    return new Ember.Handlebars.SafeString('z-index: 131071');
}.property()

或者，您可以添加一个具有适当属性设置的类。

在 HTMLBars 中，您将能够编写

<div style="z-index: {{zIndex}}"> .... </div>

更多详情，请参阅this post。但我不确定当前是否支持这种语法。对此的报告是here。

【讨论】：