Ember.js: Dynamic width based on model attribute value - ember.js

Question

First-time Ember user here. In the app, my model objects are each represented by a rectangular-shaped <div> element. The width of each div is determined by its model's size property. The catch is that the possible values for Model.size are 1-10, not simply pixel values. The div's width is then calculated based on the size. For example, a size of 1 might equal a width of 100px, and a size of 2 would equal 200px, and so on. Thus, these CSS width values need to be calculated and bound to the template. Being new to Ember, I don't yet know where this logic should live. Helper? Controller? Because it's really just presentation logic, it doesn't seem right to have it in the model.
<script type="text/x-handlebars" id="things">
{{#each model}}
<div>
{{description}}
</div>
{{/each}}
</script>
Also, will binding it to the template allow the calculated width to be updated automatically in the template whenever the Model.size value is changed (say, from 1 to 3, thus the div would grow wider)?

Answer 1

While it is a good idea to keep presentation and logic separate, sometimes they need to be mixed. I've certainly had use cases. I used this helper when I had a similar issue. Assuming you had this property in your model:
divWidth: function() {
return this.get('size') * 100;
}.property('size')
You could use this template (which is bound to the property value):
<script type="text/x-handlebars" id="things">
{{#each model}}
<div {{bindStyle width="divWidth" width-unit="px"}}>
{{description}}
</div>
{{/each}}
</script>

Answer 2

I don't think this is the right way to do this, but you should be able to do it this way. You can add a function to your controller (or, I believe your model as well) that listens to the size property for changes, and then calls a jQuery function.
i.e.
changeSize: function() {
return $('#things').css( 'width', this.get('size') * 100);
}.property('size')
Also, you could create a computed property in your model the calculates the size for you:
divSize: function() {
return this.get('size') * 100;
}.property('size')
And you'd reference the divSize in changeSize function, which would be useful if your conversion was more complicated than just multiplying by 100. The helper in the other answer looks useful and more Ember-esque, but here's another way it could be done.