css - 使用 Ember.js 更新 CSS 属性

标签 css data-binding properties ember.js

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

我在模板中创建了一个 {{ Ember.TextField }} 和 <style>使用正确的 CSS 声明(其中包含 Ember 变量)标记,以更新 CSS。我收到一条错误消息,告诉我 Ember 无法访问我的 <style> 中的变量标签,因为它不在 DOM 之外;这是有道理的,生成的代码是 <script>里面 <style>在另一个里面<script> ,有点丑。

我想知道是否有一种(干净的)Ember 方式将输入/文本区域/选择字段与 CSS 属性链接起来。我读过Ember.js - Update CSS width based on an object property ,但是向我想要更新的每个标签添加 {{bindAttr}} 可能会适得其反,因此我询问 Ember 专家是否有办法以某种方式将所有这些更改分组来完成我需要的操作。

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

谢谢!

最佳答案

我认为在这种情况下使用观察者会很好。

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

关于css - 使用 Ember.js 更新 CSS 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15260521/

相关文章:

html - 文本溢出 Div 使用变换时 : rotate(90. 0deg)

asp.net - Bind() 或 Eval() 是否会自动进行 HtmlEncode 以防止 XSS?

data-binding - Grails 命令对象数据绑定(bind)

javascript - 如何有效地计算 JavaScript 中对象的键/属性的数量

python - 通过属性与通过文档的只读属性

c# - 'Has' 属性是好的做法吗?

javascript - 从 javascript 获取样式设置的问题

html - 根据内部内容自动调整div

javascript - selectAll 不选择 D3 上的任何节点

winforms - 在 winforms 中,将表单( View )绑定(bind)到强类型对象的最佳(或好的)方法是什么?