Ember.js:基于模型属性值的动态宽度

Question

这里是首次使用 Ember 的用户。在应用程序中，我的模型对象均由矩形 <div> 表示。元素。每个div的宽度由其模型的size决定属性(property)。问题是 Model.size 的可能值是1-10，而不是简单的像素值。然后根据 size 计算 div 的宽度。例如，size 1 可能等于 100px 的宽度，并且 size 2 等于 200px，依此类推。因此，需要计算这些 CSS 宽度值并将其绑定(bind)到模板。作为 Ember 的新手，我还不知道这个逻辑应该存在于哪里。 helper ？ Controller ？因为它实际上只是表示逻辑，所以将其放在模型中似乎并不正确。

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

此外，将其绑定(bind)到模板允许每当Model.size时在模板中自动更新计算的宽度。值发生变化(例如，从 1 变为 3，因此 div 会变宽)？

Answer 1

虽然将表示和逻辑分开是一个好主意，但有时它们需要混合。我当然有用例。我用过this helper当我有类似的问题时。假设您的模型中有此属性:

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

您可以使用此模板(绑定(bind)到属性值):

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