ember.js - 在ember js中构造动态类名

Question

使用 Ember.js - 在我的 Handlebars 模板中，我希望能够根据我存储的多个属性“构建”一个 css 类。

我的数据如下所示:

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']
    }]

我想基于 id 而不是标题构建我的 css，因为名称会不时更改(但你不能在类中使用纯数字)，所以我的目标是一些看起来像这样的 html

<li class='scratch101'>Bark</li>

class 是 addonItem.class 和 addonChoices.id 的组合

我知道我可以向 AddonChoices 添加一个类，但我想避免这种情况，因为它是我真正不需要跟踪的额外数据。

关于如何在 Handlebars 模板中构造类名有什么想法吗？

更新:我最终使用 View 解决了这个问题...在 @louiscoquio 的帮助下

创建了一个 View 并将函数tileClass包含在classNameBindings中:

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

在我的模板中调用 View ，如下所示:

    {{ view App.Tiles 
     titleBinding= 'addonChoices.title'  
     idBinding= 'addonChoices.id'
     typeBinding= 'addonItem.class' }}

渲染此 html

<li title="Kiwi" id="ember494" class="ember-view scratch scratch105 Kiwi"></li>

Answer 1

我假设您正在使用 ember 数据，就像您使用 FIXTURES 一样。

鉴于这些 AddonItem 和 AddonChoices 模型:

AddonItem = DS.Model.extend({
  choices: DS.attr('hasMany', 'App.AddonChoices'),
  class: DS.attr('string')
});

AddonChoices = DS.Model.extend({
  owner: DS.attr('belongsTo', 'App.AddonItem'),
  title: DS.attr('string')
});

您可以在 AddonChoices 模型中定义计算属性，如下所示:

AddonChoices.reopen({
  ownerClassAndId: function() {
    return this.get('owner.class') + this.get('id');
  }.property('owner.class', 'id')
});

您可以注意到该属性取决于 owner.class 和 id。这意味着每次 owner.class 或 id 更改时都会重新计算该属性。

无论如何，我认为这个计算属性不应该在模型中定义，而应该在 Controller (甚至对于这个用例来说是 View )中定义。