2

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

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

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

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

谢谢！

4

1 回答 1

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')
});
于 2013-03-07T05:08:50.403 回答