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

这里是首次使用Ember用户。在应用程序中，我的模型对象分别由矩形<div>元素表示。每个div的宽度由其型号的size属性确定。值得注意的是Model.size的可能值是1-10，而不仅仅是像素值。然后div的宽度根据size计算。例如，一个size可能等于的100px的一个宽度和一个size将等于200像素，等等。因此，需要计算这些CSS宽度值并将其绑定到模板。作为Ember新手，我不知道这个逻辑应该在哪里生存。帮手？控制器？因为它实际上只是表示逻辑，所以在模型中使用它似乎不太合适。Ember.js：基于模型属性值的动态宽度

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

另外，将它结合到模板允许所计算的宽度，以在模板自动更新每当Model.size值被改变（比如，1〜3，从而在div会变宽）？

来源

2014-01-22 imderek

虽然将演示文稿和逻辑分开是一个不错的主意，但有时需要将它们混合使用。我肯定有用例。当我遇到类似问题时，我使用了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>

来源

2014-01-22 22:21:11 GJK

非常感谢，GJK。 – imderek

我不认为这是正确的方式要做到这一点，但你应该能够这样做。你可以添加一个函数到你的控制器（或者，我相信你的模型），它会监听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，但是这是另一种可以完成的方式。

来源

2014-01-22 22:37:32 EmptyArsenal

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

回答

相关问题