3

使用 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 而不是标题来构建我的 css，因为名称会不时更改（但你不能在类中使用纯数字）所以我的目标是一些看起来像这样的 html

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

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

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

关于如何在车把模板中构造类名的任何想法？

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

创建了一个视图并将函数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 App.Tiles 
     titleBinding= 'addonChoices.title'  
     idBinding= 'addonChoices.id'
     typeBinding= 'addonItem.class' }}

呈现这个 html

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

1 回答 1

0

我假设您正在使用 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.classorid更改时都会重新计算该属性。

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

于 2013-04-26T12:52:31.723 回答