Question

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

类似的东西：

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

Answer 1

另一种简单的方法是向模型添加计算属性。

模型----

App.Photo = Em.Object.extend(
  objectId: null
  url: ""
  style: (-> 
    "background-image:url('" + @get("url") + "')"
  ).property("url")
)

模板-----

{{#each item in App.photoController}}
<div {{bindAttr style="item.style"}}></div>
{{/each}}

我有这个工作，似乎是最简单的方法。

Answer 2

请注意，自ember 1.13起。不推荐使用绑定属性（bind-attr）。您需要使用与此类似的代码绑定到类：

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

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

推荐的方法是自己转义CSS（即创建escapeCSS函数，该函数将适当地转义特定的CSS以防止XSS - 这不是内置函数。您可以从{{1}开始并添加来自该基础的任何其他检查。）可在此处找到更多信息： https://guides.emberjs.com/v2.2.0/templates/writing-helpers/#toc_escaping-html-content

然后你告诉Ember字符串是＆＃34;安全＆＃34;使用Ember.Handlebars.Utils.escapeExpression，Ember不会试图逃避该内容。

控制器：

Ember.String.htmlSafe

<强>模板：

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

参考：http://emberjs.com/deprecations/v1.x/#toc_binding-style-attributes

Answer 3

不完全那样但是接近。您必须自己构建style字符串。请看this jsFiddle。

App = Ember.Application.create();
/**************************
* Models
**************************/


/**************************
* Views
**************************/
App.View = Ember.View.extend({
    style: function() {
      return "background-color:" + this.get('color');
    }.property('color').cacheable()
});

/**************************
* Controllers
**************************/
App.set('controller', Ember.Object.create({
  color: "transparent",

  red: function() {
    this.set('color', 'red');
  },

  blue: function() {
    this.set('color', 'blue');        
  },

  style: function() {
   return "background-color:" + this.get('color');
  }.property('color').cacheable()
}));
/**************************
* App Logic
**************************/
$(function() {

模板：

{{#view Ember.Button target="App.controller" action="blue"}}BLUE{{/view}}  
  {{#view Ember.Button target="App.controller" action="red"}}RED{{/view}} 

  {{#view App.View colorBinding="App.controller.color" attributeBindings="style"}}
    Color is {{App.controller.color}}
  {{/view}}

   <hr>
   <div {{bindAttr style="App.controller.style"}}>And another way...</div>

Answer 4

最近的Ember版本（撰写本文时为2.3.0）允许直接嵌入计算样式。

// bar-graph.js
import Ember from 'ember';

export default Ember.Component.extend({  
  classNames: ['bar-graph'],

  inlineStyle: Ember.computed('attrs.min', 'attrs.max', 'attrs.value', function() {
    let min = this.get('attrs.min');
    let max = this.get('attrs.max');
    let value = this.get('attrs.value')
    let percentage = Math.round(value / (max - min) * 100);
    return new Ember.Handlebars.SafeString(`width: ${percentage}%`);
  })
});

<!-- bar-graph.hbs -->
<div class="bar" style={{inlineStyle}}>{{value}}</div>

Live example

Answer 5

我尝试过使用@WallMobile提供的答案，但它有一些语法问题。所以这是要使用的正确语法。

App.Photo = Em.Object.extend({
  objectId: null,
  url: "",
  style: function() {
    return "background-image:url('" + this.get("url") + "')"
  }.property("url")
})

Answer 6

HTMLBars现在允许您这样做 - 升级到最新的ember / ember-cli以利用新功能。

Answer 7

有一个新的插件，它允许您将样式声明为JS对象并将它们绑定到组件的样式属性。查看ember-computed-style

import computedStyle from 'ember-computed-style';

export default Ember.Component.extend({
  style: computedStyle('backgroundStyle'),
  attributeBindings: ['style'],

  backgroundStyle: function(){
    return {
      backgroundColor: this.get('divColor')
    };
  }.property('divColor'),

  divColor: 'red'
});

这将产生：

<div style="background-color:red;"></div>

Answer 8

您可以使用的另一种方法是CSS自定义属性。

ember-cli-custom-properties是一个Ember插件，它将组件属性绑定到CSS自定义属性（变量）。它相当简单易用。安装插件后，插件将在customProperties类上提供customPropertyBindings和@ember/component属性。

例如，您可以将上面的原始HTML转换为Ember组件，并为其指定一个类名。

import Component from '@ember/component';

export default Component.extend ({
  classNames: ['my-component'],

  // Map the backgroundColor attribute to a CSS custom property
  customProperties: ['backgroundColor']
});

然后可以在您的应用程序的样式中引用该类名称。

.my-component {
  background-color: var(--background-color);
}

最后，只需将组件上的backgroundColor属性设置为所需的颜色即可。

{{my-component backgroundColor="red"}}

emberjs的style属性

8 个答案: