Question

我想将文本输入与CSS链接以重新创建WordPress主题（实时）自定义程序，其中更改输入中的值会更新特定的CSS值。

我在模板中创建了一个{{Ember.TextField}}，并在其中添加了带有Ember变量的正确CSS声明的<style>标记，以更新CSS。我收到一个错误，告诉我Ember无法访问<style>标记中的变量，因为它不在DOM中;有意义的是，生成的代码在另一个<script>内的<style>内是<script>，有点难看。

我想知道是否有（干净的）Ember方式将输入/ textarea / select字段与CSS属性相关联。我读了Ember.js - Update CSS width based on an object property，但是为我想要更新的每个标签添加{{bindAttr}}可能会适得其反，所以我问Ember专家是否有办法将所有这些变化以某种方式分组做我需要的。

否则，我想这将是一个jQuery自制的插件，但我更愿意在放弃Ember魔法之前完全确定这样做;）

谢谢！

Answer 1

我认为在这种情况下使用观察者可以正常工作。

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')
});

使用Ember.js更新CSS属性

1 个答案: