ember.js - Emberjs bindAttr id-prefix

Question

I am loading multiple models (using an ArrayController) with ember-data that obviously returns and id for each model and I am displaying some dynamic map content based on that, 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}}

That works fine, but my problem is, I don't just want the id-number for the div id, but I want it with a static prefix: E.g. user-{{id}}. Or at a different route I would want e.g. news-{{id}} Is anything like that possible?

Answer 1

假设您可以将前缀存储在模型数据中，您可以为此用例创建一个计算属性：

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')
});

然后改用计算属性：

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