使用 Ember.js 更新 CSS 属性答案

【问题标题】：Update CSS properties with Ember.js使用 Ember.js 更新 CSS 属性
【发布时间】：2013-02-22 00:31:05
【问题描述】：

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

我在我的模板中创建了一个 {{ Ember.TextField }} 和一个带有正确 CSS 声明的 <style> 标记，其中包含 Ember 变量，以更新 CSS。我收到一条错误消息，告诉我 Ember 无法访问我的 <style> 标记中的变量，因为它不在 DOM 中；这是有道理的，生成的代码是<script> 内的<style> 内的另一个<script>，有点难看。

我想知道是否有一种（干净的）Ember 方法可以将输入/文本区域/选择字段与 CSS 属性链接起来。我读了Ember.js - Update CSS width based on an object property，但是在我想更新的每个标签中添加 {{bindAttr}} 可能会适得其反，所以我问 Ember 专家是否有办法以某种方式对所有这些更改进行分组来做什么我需要。

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

谢谢！

【问题讨论】：

标签： css data-binding properties ember.js

【解决方案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')
});

【讨论】：