CODEWITHSUNDEEP
cssdata-bindingpropertiesember.js
Pedro Boutros Saïkali
Pedro Boutros Saïkali

Reputation: 21

Update CSS properties with Ember.js

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!

Upvotes: 2

Views: 751

Answers (1)

sheldonbaker
sheldonbaker

Reputation: 1079

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

Upvotes: 2

Related Questions