title: Construct a dynamic class name in ember js
body: <p>Using Ember.js - in my handlebars template, I would like to be able to "build" a css class based on multiple properties I have stored. </p>
  
  <p>My Data looks like this:</p>
  
  <pre><code>App.AddonChoices.FIXTURES = [
    { id:101, title: 'Bark' },
    { id:102, title: 'Teal' },
    { id:103, title: 'Tangerine' }
  ]
  
  App.AddonItem.FIXTURES = [{
        id: 100,
        name: 'Scratch Pad',
        class: 'scratch',
        selected: null,
        choices: [101, 102, 103] //['Bark', 'Teal', 'Tangerine']
      }]
  </code></pre>
  
  <p>I would like to build my css based on id rather than title because the names change from time to time (but ya cant use pure numbers in classes) so I was aiming for some html that looks like this</p>
  
  <pre><code>&lt;li class='scratch101'&gt;Bark&lt;/li&gt;
  </code></pre>
  
  <p>with the <strong>class</strong> being a combination of <strong>addonItem.class</strong> and <strong>addonChoices.id</strong></p>
  
  <p>I know I can just add a class to AddonChoices, but I would like to avoid that as it is extra data that I dont really need to track. </p>
  
  <p>Any ideas on how to construct the class name within handlebars template?</p>
  
  <p><strong>UPDATE:</strong>
  I ended up solving it using views... with some help from @louiscoquio</p>
  
  <p>Created a view and included the function <strong>tileClass</strong> in the <strong>classNameBindings</strong>:</p>
  
  <pre><code> App.Tiles = Ember.View.extend({
    type:null,
    id:null,
    tagName:'li',
    classNameBindings: ['type', 'title', 'tileClass'],
    tileClass: function(){
    return  this.get('type') + this.get('id')
    }.property('type', 'id')
   });
  </code></pre>
  
  <p>Call the view within my template like so:</p>
  
  <pre><code>    {{ view App.Tiles 
       titleBinding= 'addonChoices.title'  
       idBinding= 'addonChoices.id'
       typeBinding= 'addonItem.class' }}
  </code></pre>
  
  <p>which renders this html</p>
  
  <pre><code>&lt;li title="Kiwi" id="ember494" class="ember-view scratch scratch105 Kiwi"&gt;&lt;/li&gt;
  </code></pre>