Question

首次使用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会变得更宽）？

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更复杂，这将非常有用。另一个答案中的帮助程序看起来很有用，而且更多Ember- esque，但这是另一种可以做到的方式。

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

2 个答案: