Ember.js：基于模型属性值的动态宽度答案

【问题标题】：Ember.js: Dynamic width based on model attribute valueEmber.js：基于模型属性值的动态宽度
【发布时间】：2014-01-22 20:32:00
【问题描述】：

这里是 Ember 的第一个用户。在应用程序中，我的模型对象每个都由一个矩形的<div> 元素表示。每个 div 的宽度由其模型的 size 属性决定。问题是Model.size 的可能值是 1-10，而不仅仅是像素值。然后根据size 计算 div 的宽度。例如，1 的 size 可能等于 100px 的宽度，2 的 size 可能等于 200px 等等。因此，需要计算这些 CSS 宽度值并将其绑定到模板。作为 Ember 的新手，我还不知道这种逻辑应该放在哪里。帮手？控制器？因为它实际上只是表示逻辑，所以在模型中包含它似乎不合适。

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

另外，将它绑定到模板是否允许在 Model.size 值更改时在模板中自动更新计算的宽度（例如，从 1 到 3，因此 div 会变宽）？

【问题讨论】：

标签： ember.js

【解决方案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>

【讨论】：

【解决方案2】：

我认为这不是正确的方法，但您应该可以这样做。你可以向你的控制器（或者，我相信你的模型）添加一个函数来监听 size 属性的变化，然后调用一个 jQuery 函数。

即

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

此外，您可以在模型中创建一个计算属性，为您计算大小：

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

并且您将在 changeSize 函数中引用 divSize，如果您的转换比仅仅乘以 100 更复杂，这将很有用。另一个答案中的帮助器看起来很有用并且更像 Ember-esque，但这里是另一种方法可以做到。

【讨论】：