Adding property on Ember model that doesn't exist in the REST model.

We’ve connected our Ember app using the Django Rest adapter written by @toranb. So far it’s working quite well, but I have a question about properties. We’re adding a set of CSS class to one of the HTML elements. Right now the variable containing those classes is hard-coded avatar-icon icon-twitter but I’d like to make it dynamic as the only part which changes is twitter (facebook, pinterest, etc.).

Using bindAttr to bind Ember variables to an attribute is easy: <i {{bindAttr class="account.classlist"}}></i>

But I’m wondering how I can make the value dynamic. I’d also like to know how I can hardcode one class avatar-icon while still allowing the other one to pull from the model.

Thoughts? Is there something simple that I’m missing? Would you suggest an alternate course?

This option in the Ember docs answers part of my question, which is “how to combine a static class name with a dynamic one”: https://github.com/trek/ember.js/commit/8b2eafbf61077fa94baca21e8d75b2466ee70e96#L0R388

I’d still like to know how to build a dynamic classname like so:

provider = ‘twitter’ icon-

results in icon-twitter

You should be able to use a computed property:

<i {{bindAttr class=":avatar-icon account.cssClass"}}></i>

And

App.Account  = DS.Model.extend({
  ...
  service: DS.attr('string'),
  cssClass: function() {
    return 'icon-' + this.get('service');
  }.property('service')
});

Note that it would normally be a good idea to have this kind of display property on a controller instead of a view, but the above is the general idea.

I can’t believe I didn’t think of this. Thank you Luke.