Ember.js : 모델 속성 값을 기준으로 한 동적 폭

Question

처음으로 Ember 사용자가 여기 있습니다. 이 응용 프로그램에서 내 모델 객체는 각각 사각형 모양의 <div> 요소로 나타납니다. 각 div의 너비는 해당 모델의 size 속성에 의해 결정됩니다. 잡히는 점은 Model.size에 가능한 값이 단순히 픽셀 값이 아니라 1-10이라는 것입니다. div의 너비는 size을 기준으로 계산됩니다. 예를 들어, 1 의 size은 100 픽셀의 폭과 동일 할 수 및 size2 너무에 200 픽셀과 같을 것이다. 따라서 이러한 CSS 폭 값을 계산하여 템플릿에 바인딩해야합니다. Ember에게 새로운 것이므로이 논리가 어디에서 살아야하는지 아직 알지 못합니다. 돕는 사람? 제어 장치? 실제로는 프리젠 테이션 로직이기 때문에 모델에 포함되어있는 것처럼 보이지 않습니다. 또한

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

상기 Model.size 값 (따라서 DIV 넓게 성장할 것이다 1~3 말하자면) 변경 될 때마다 계산 된 폭이 템플릿에 자동으로 업데이트 될 수 있도록 템플릿에 결합 할 것인가?

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 함수를 호출하는 컨트롤러에 함수를 추가 할 수 있습니다 (또는 모델도 믿을 수 있습니다). 어느 것의 divSizechangeSize의 기능을

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

그리고 당신은 참조 할 것 :

즉 또한

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

, 당신은 당신의 크기 모델의 계산을 계산 된 속성을 만들 수 있습니다 전환이 100 배로 증가하는 것보다 복잡하다면 유용 할 것입니다. 다른 답변의 도우미는 유용하고 더 Ember-esque로 보입니다. 그러나 여기에 다른 방법이 있습니다.