Question

使用Ember.js - 在我的手柄模板中，我希望能够根据我存储的多个属性“构建”一个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而不是title来构建我的CSS，因为名称不时会改变（但是你不能在类中使用纯数字）所以我的目标是找到一些看起来像这样的HTML

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

类是 addonItem.class 和 addonChoices.id

的组合

我知道我可以在AddonChoices中添加一个类，但我想避免使用它，因为它是我真正需要跟踪的额外数据。

如何在把手模板中构建类名？

更新我最终使用视图来解决它......在@louiscoquio的帮助下

创建了一个视图，并在 classNameBindings 中包含了 tileClass 功能：

 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 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更改时都会重新计算该属性。

无论如何，我认为这个计算属性不应该在模型中定义，而应该在控制器中（或者甚至是视图，对于这个用例）。

在ember js中构造一个动态类名

1 个答案: