Ember.js: Динамическая ширина, основанная на значении атрибута модели

Question

Здесь впервые появился пользователь Ember. В приложении мои объекты модели представлены прямоугольным профилем <div>. Ширина каждого div определяется свойством модели size. Улов состоит в том, что возможные значения для Model.size составляют 1-10, а не просто значения пикселей. Ширина div затем вычисляется на основе size. Например, size из может равняться ширине 100px и size из будет равна 200px, и так далее. Таким образом, эти значения ширины CSS должны быть рассчитаны и привязаны к шаблону. Будучи новым для Эмбера, я еще не знаю, где должна жить эта логика. Helper? Контроллер? Поскольку это действительно просто логика представления, не представляется правильным иметь ее в модели.

<script type="text/x-handlebars" id="things"> 
    {{#each model}} 
    <div> 
     {{description}} 
    </div> 
    {{/each}} 
</script> 

Кроме того, будет привязывая его к шаблону позволяют расчетная ширина будет обновляться автоматически в шаблоне, когда значение Model.size изменяется (например, от 1 до 3, таким образом, DIV будет расти шире)?

Answer 1

Хотя это хорошая идея, чтобы держать презентацию и логику раздельными, иногда их нужно смешивать. У меня наверняка были случаи использования. Я использовал this helper, когда у меня была аналогичная проблема. Предполагая, что вы имели это свойство в модели:

divWidth: function() { 
    return this.get('size') * 100; 
}.property('size') 

Вы можете использовать этот шаблон (который привязан к стоимости недвижимости):

<script type="text/x-handlebars" id="things"> 
    {{#each model}} 
     <div {{bindStyle width="divWidth" width-unit="px"}}> 
      {{description}} 
     </div> 
    {{/each}} 
</script> 

Answer 2

Я не думаю, что это права пути для этого, но вы должны быть в состоянии сделать это таким образом. Вы можете добавить функцию к вашему контроллеру (или, я считаю, вашу модель), который слушает свойство size для изменений, а затем вызывает функцию jQuery.

т.е.

changeSize: function() { 
    return $('#things').css('width', this.get('size') * 100); 
}.property('size') 

Кроме того, вы можете создать вычисляемое свойство в модели в Вычисляет размер для вас:

divSize: function() { 
    return this.get('size') * 100; 
}.property('size') 

И вы бы ссылаться на функцию divSize в changeSize, который бы быть полезным, если ваше преобразование было более сложным, чем просто умножение на 100. Помощник в другом ответе выглядит полезным и более опасным, но вот еще один способ сделать это.