Атрибут стиля с emberjs

Ответ 1

Обратите внимание, что с ember 1.13. атрибуты привязки (bind-attr) устарели. Вам нужно будет использовать код, подобный этому, для привязки к классу:

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

Кроме того, привязка style таким образом не рекомендуется, поскольку она может включать уязвимости XSS. Рекомендуемый подход заключается в использовании строкового espace, предоставляемого Handlebars. контроллер:

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

шаблон

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

Ссылка: http://emberjs.com/deprecations/v1.x/#toc_binding-style-attributes

Ответ 2

Еще один простой способ сделать это - добавить вычисленное свойство в вашу модель.

Модель ----

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

Я получил эту работу и, кажется, самый простой способ это сделать.

Ответ 3

Не совсем так, но близко. Вам нужно будет построить строку style самостоятельно. Посмотрите этот 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>

Ответ 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>

Живой пример

Ответ 5

Я попытался использовать ответ, предоставленный @WallMobile, но он имеет некоторые проблемы с синтаксисом. Таким образом, это правильный синтаксис, который будет использоваться.

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

Ответ 6

Теперь HTMLBars позволяет это сделать - обновить до последнего ember/ember-cli, чтобы воспользоваться новым материалом.

Ответ 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>