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 にクラスを追加できることはわかっていますが、追跡する必要のない余分なデータであるため、これは避けたいと思います。

handlebars テンプレート内でクラス名を作成する方法についてのアイデアはありますか?

更新: ビューを使用して解決することになりました... @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.classまたはが変更されるたびにプロパティが再計算されることを意味しますid。

とにかく、この計算されたプロパティはモデルではなく、コントローラー (またはこのユースケースではビュー) で定義する必要があると思います。

于 2013-04-26T12:52:31.723 に答える