ember.js - 带有 emberjs 的样式属性

Question

有没有办法通过使用 emberjs 属性的自动绑定(bind)来设置 css 属性？

就像是:

<div {{bindAttr style="background-color: divColor;"}}>
    ...
</div>

Answer 1

请注意，截至 ember 1.13 .绑定(bind)属性 (bind-attr) 已弃用。您需要使用与此类似的代码来绑定(bind)到该类:

<div class={{myClass}}></div>

此外， style不推荐以这种方式绑定(bind)，因为它会引入 XSS 漏洞。 HTML 模板在使用 {{...}} 时自动转义 HTML 以防止 XSS ，但样式属性在内置转义范围之外还有其他漏洞。

推荐的方法是自己转义 CSS(即创建 escapeCSS 函数，该函数将适本地转义特定 CSS 以防止 XSS - 这不是内置函数。您可以从 Ember.Handlebars.Utils.escapeExpression 开始并添加任何额外的检查该基础。)可以在此处找到更多信息:
https://guides.emberjs.com/v2.2.0/templates/writing-helpers/#toc_escaping-html-content

然后使用 Ember.String.htmlSafe 告诉 Ember 字符串是“安全的”。 ，并且 Ember 不会尝试逃避该内容。

Controller :

myStyle: Ember.computed('color', function() {
    var color = escapeCSS(this.get('color'));
    return new Ember.String.htmlSafe("color: " + color);
  })

模板 :

<div style={{myStyle}}></div>

引用: http://emberjs.com/deprecations/v1.x/#toc_binding-style-attributes