Class definition separation

gistfile1.js

// foo-component.js

export default Ember.Component.extend({
  classNames: ['foo'],
  barClasses: Ember.computed('bar', function () {
    return this.get('bar') ? 'foo bar' : 'foo'; 
  }),
  
  bazClasses: Ember.computed('baz', function () {
    return this.get('baz') ? 'baz' : '';
  })
});

// foo.component.hbs

<div class='foo-header'>
  <span class=barClasses>I am bar</span>
  <div class='stuff things'>{{things-list things}}</div>
  <div class=bazClasses>
    {{#each bazItems as |item|}}
      {{baz-component item}}
    {{/each}}
  </div>
</div>