Emberjs bindAttr id-prefix

Question

I load several models (using ArrayController) with ember data that explicitly returns an id for each model, and I show some dynamic map contents based on this, which is initialized via JS in the didInsertElement function. So my hbs code looks like this:

 {{#each controller}} .... <div class="map" {{bindAttr id="id"}}> .... {{/each}} 

This works fine, but my problem is that I do not just want the id id for the id div, but I want it with a static prefix: for example. user-{{id}} . Or on another route that I would like to get, for example, news-{{id}} Is this possible?

Answer 1

Assuming you can store the prefix in the model data, you can create a computed property for this use case:

 App.User = DS.Model.extend({ ... prefixedId: function() { return "user-" + this.get('id'); }.property('id') }); App.News = DS.Model.extend({ ... prefixedId: function() { return "news-" + this.get('id'); }.property('id') }); 

And then use the computed property:

 {{#each controller}} .... <div class="map" {{bindAttr id="prefixedId"}}> .... {{/each}}