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：基於模型屬性值的動態寬度

回答

相關問題