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

1

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?

2

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

3

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.

4

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