Skip to content

Instantly share code, notes, and snippets.

@k-fish
Created August 6, 2019 20:47
Show Gist options
  • Save k-fish/6a28cc9edd53bc8ad1752f82e5dce095 to your computer and use it in GitHub Desktop.
Save k-fish/6a28cc9edd53bc8ad1752f82e5dce095 to your computer and use it in GitHub Desktop.
Check dynamic classNames
import Ember from 'ember';
export default Ember.Component.extend({
classNames: ['hello']
});
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
foo: true,
actions: {
changeFoo() {
this.set('foo', !this.get('foo'));
console.log(this.get('foo'));
}
}
});
body {
margin: 12px 16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12pt;
}
.hello {
border: 4px solid black;
}
.foo {
background-color: red;
}
.bar {
background-color: green;
}
<h1>Dynamic Classnames</h1>
<br>
<br>
{{my-component
class=(concat 'nothing ' (if foo 'foo' 'bar'))
}}
<br>
<br>
<button {{action 'changeFoo'}}>Change</button>
<br />
<br />
Hello
<br />
<br />
{
"version": "0.15.1",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
"ember": "3.4.3",
"ember-template-compiler": "3.4.3",
"ember-testing": "3.4.3"
},
"addons": {
"ember-data": "3.4.2"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment