Ember.js binding to component/view style attributes

I'm trying to create a component, or a view if that is better suited for this, that binds to given model's computed properties and changes style attributes accordingly. I'm using Ember App Kit if that affects in anyway how this should be done.

The component would be a a meter that has 2 computed properties to bind to: "limitDeg", "currentValueDeg". Every model instance that will use this component can supply those as model computed properties to the component.

The meter has 3 overlapping divs - ".meter-div" being just background with no bindings, and one of which will be rotated with CSS3 transform by X-degrees to show the current "limitDeg". So adjusting the "transform: rotate(###deg);" is the key here. There is a "indicator-div", that is simple indicator that similarly rotates based on the "currentValueDeg" with CSS3 animation loop.

Below is a basic rough outline of how I've thought of having the component/view:

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

...and I would use it like this for example: {{#each}} ... {{my-component}} ... {{/each}}

1) I would like the component to bind to the model so, that when the "limitDeg" computed property changes, the ".limit-div" will be rotated by X-degrees with CSS3 transform: rotate(###degrees);.

2) I would like animate the ".indicator-div" with a CSS3 animation that loops infinitely, binding to the currentValueDeg computedProperty.

Is this something I should even try do this with one component/view, or rather do it this multiple components/views inside one partial?

Solution

If you're using handlebars, just wrap your component in tags that specify it as such:

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

Then include it in your view like this:

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

If you wanted the component to display a model property, you could do something like this inside the component (using the variables in my example above):

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

Edit:

For the sake of clarity, objectToPassIn is the model that is passed to the view that calls the component.