Ember.js綁定到組件/視圖樣式屬性

我試圖創建一個組件或視圖，如果這更適合於此，它綁定到給定模型的計算屬性並相應地更改樣式屬性。我正在使用Ember App Kit，如果這影響了這個應該怎麼做。Ember.js綁定到組件/視圖樣式屬性

該組件將是一個計米器，它有2個計算屬性綁定到：「limitDeg」，「currentValueDeg」。每個將使用此組件的模型實例都可以將這些屬性作爲模型計算屬性提供給組件。

該儀表有3個重疊的div - 「.meter-div」僅僅是沒有綁定的背景，其中一個將通過CSS3轉換X軸旋轉以顯示當前的「limitDeg」。所以調整「transform：rotate（### deg）;」這裏是關鍵。有一個「指標div」，這是一個簡單的指標，類似的基於CSS3動畫循環的「currentValueDeg」旋轉。

下面是我怎麼想具有組件/視圖的基本粗線條：

<div class="my-component-container"> 
    <div class="limit-div"></div> 
    <div class="meter-div"></div> 
    <div class="indicator-div"></div> 
</div>

...我會這樣使用它，例如： {{#each}} ... {{我的組分}} ... {{/每}}

1）我想組件綁定到模型是這樣，使得當「limitDeg」計算屬性的變化，「.limit-div」將用CSS3變換旋轉X度：rotate（### degrees）;.

2）我想動畫的「.indicator-div」CSS3動畫無限循環，綁定到currentValueDeg computedProperty。

這是我甚至應該嘗試用一個組件/視圖做這件事情，或者更確切地說，這是多個組件/視圖內的一個部分嗎？

來源

2014-01-30 billyblaze

如果你使用的把手，只是包裝您的組件在標籤中指定它是這樣：

<script type='text/x-handlebars' data-template-name='components/component_name'> 
    <div class="limit-div"></div> 
    <div class="meter-div"></div> 
    <div class="indicator-div"></div> 
</script>

然後將其包含在您的看法是這樣的：

{{component_name objectToPassIn=this classNames='my-component-container' tagName='div'}}

如果你想要的組件來顯示一個模型屬性，你可以在組件內部做這樣的事情（使用上面例子中的變量）：

<span class='property-wrapper'> 
    {{objectToPassIn.objectProperty}} 
</span>

編輯：

爲了清晰起見，objectToPassIn是傳遞給調用組件的視圖的模型。

來源

2014-01-31 11:28:12

我仍然需要一種綁定到style屬性的方法，並在limitValueDeg和currentValueDeg的值改變。

我可以得到綁定到objectToPassIn的那些值嗎？ – billyblaze

嗯，我想你可以將它們綁定爲對象上的字符串屬性，然後使用像這樣的'{{bind-attr attr ='objectProperty'}}'的handle-bar'方法來更改值並查看前端。這是你的意思嗎？ –

我不認爲有可能綁定到風格。當我嘗試這樣做時，ember.js和handlebars用變形包裹了元素，並且破壞了標籤 - 樣式無法正確呈現。 – billyblaze

Ember.js綁定到組件/視圖樣式屬性

回答

相關問題