Update CSS properties with Ember.js

Question

I'd like to link text inputs with CSS to recreate the WordPress theme (live) customizer, where changing a value in an input update a specific CSS value.

I created a {{ Ember.TextField }} in my template, and a <style> tag with the correct CSS declaration with the Ember variable in it, to update the CSS. I get an error telling me that Ember can't access the variable in my <style> tag because it's out of the DOM; that makes sense, the generated code is a <script> inside a <style> inside another <script>, a bit ugly.

I'm wondering if there is a (clean) Ember way to link an input/textarea/select field with CSS properties. I read Ember.js - Update CSS width based on an object property, but adding {{bindAttr}} to every tags I'd like to update would probably be counterproductive, so I'm asking Ember experts if there is a way to group all these changes in some way to do what I need.

Otherwise, I guess this will be a jQuery home-made plugin, but I'd prefer to be completely sure to do that before giving up on Ember magic ;)

Thanks!

sheldonbaker · Accepted Answer · 2013-03-08 03:01:14Z

2

I think using an observer in this case would work fine.

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

edited Mar 8, 2013 at 3:01

answered Mar 7, 2013 at 5:08

sheldonbaker

1,0797 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Update CSS properties with Ember.js

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related