2013-03-06 69 views
2

我想要使用CSS鏈接文本輸入以重新創建WordPress主題(實時)定製工具,其中更改輸入中的值更新特定的CSS值。使用Ember.js更新CSS屬性

我在我的模板中創建了一個{{Ember.TextField}},並在其中使用了正確的CSS聲明並帶有Ember變量的<style>標籤來更新CSS。我收到一個錯誤,告訴我Ember無法訪問我的<style>標記中的變量,因爲它不在DOM中;這是有道理的,生成的代碼是<script>裏面裏面另一個<script>,有點醜陋。

我想知道是否有一個(乾淨)Ember的方式來鏈接輸入/ textarea /選擇字段與CSS屬性。我閱讀Ember.js - Update CSS width based on an object property,但爲每個想要更新的標籤添加{{bindAttr}}可能會適得其反,所以我要求Ember專家是否有辦法以某種方式將所有這些更改分組以完成我所需的操作。

否則,我想這將是一個jQuery自制插件,但我更願意完全肯定這樣做的灰燼魔術放棄之前;)

謝謝!

回答

2

我認爲在這種情況下使用觀察者可以正常工作。

App.StyleTextField = Ember.TextField.extend({ 

    valueDidChange: function() { 
    var value = this.get('value'); 
    var cssText = 'h1 { color: ' + value + '; }'; // You could even use Mustache to generate this if you were so inclined 

    // create a <style /> tag with cssText and dump it into the <head /> 
    }.observes('value') 
});