Ember.js привязка к атрибутам стиля компонента/вида

Question

Я пытаюсь создать компонент или представление, если это лучше подходит для этого, которое связывается с вычисленными свойствами данной модели и соответственно изменяет атрибуты стиля. Я использую Ember App Kit, если это так или иначе влияет на то, как это должно быть сделано.

Компонент будет метром, который имеет 2 вычисленных свойства для привязки к: «limitDeg», «currentValueDeg». Каждый экземпляр модели, который будет использовать этот компонент, может предоставить эти компоненты в качестве рассчитанных на модель свойств.

Счетчик имеет 3 перекрывающиеся divs - «.meter-div», являющийся просто фоном без привязок, и один из которых будет поворачиваться с преобразованием CSS3 с помощью X-градусов, чтобы показать текущий «limitDeg». Таким образом, настройка «transform: rotate (### deg)»; является ключевым здесь. Существует «индикатор-div», который является простым индикатором, который аналогичным образом вращается на основе «currentValueDeg» с циклом анимации CSS3.

Ниже приводится основной грубый набросок того, как я думал, иметь компонент/вид:

<div class="my-component-container"> 
    <div class="limit-div"></div> 
    <div class="meter-div"></div> 
    <div class="indicator-div"></div> 
</div> 

... и я хотел бы использовать его, как это, например: {{#each}} ... {{мой-компонент}} ... {{/}} каждый

1) Я хотел бы компонент для привязки к модели так, что, когда "limitDeg" вычислены изменения свойств , «.limit-div» будет повернут X-градусами с преобразованием CSS3: rotate (### degrees) ;.

2) Я хотел бы анимировать «.indicator-div» с анимацией CSS3, которая бесконечно петляет, привязывая к currentValueDeg computedProperty.

Является ли это чем-то, что я должен попробовать сделать с помощью одного компонента/представления или, вернее, сделать это несколько компонентов/представлений внутри одного частичного?

Answer 1

Если вы используете рули, просто обернуть компонент в тегах, которые определяют его как таковой:

<script type='text/x-handlebars' data-template-name='components/component_name'> 
    <div class="limit-div"></div> 
    <div class="meter-div"></div> 
    <div class="indicator-div"></div> 
</script> 

Затем включите его на ваш взгляд, как это:

{{component_name objectToPassIn=this classNames='my-component-container' tagName='div'}} 

Если вы хотели компонент для отображения свойства модели, вы можете сделать что-то подобное внутри компонента (используя переменные в моем примере выше):

<span class='property-wrapper'> 
    {{objectToPassIn.objectProperty}} 
</span> 

Редактировать:

Для ясности objectToPassIn - это модель, передаваемая в представление, которое вызывает компонент.