2

Ember.js ビューを使用してコレクションをレンダリングしたいと思います。ここに私の要件があります：

  1. コレクション内のアイテムごとに 2 つのメタモルフ スクリプト タグを生成したくありません。DOM 構造は、厳密には UL と LI だけにする必要があります (LI 内のメタモルフは気にしません)。
  2. コレクション内の各アイテムには、選択されたプロパティがあります。このプロパティ値に従って、選択したクラスを LI に設定したい
  3. テンプレートですべてを定義し、JavaScript でこのテンプレートを使用して 1 つのビューのみを定義したい - 追加のクラスは不要

ヘルパーを使用{{each}}すると、最初の要件が満たされません。を使用{{collection}}すると、CSS クラスを条件付きで LI に割り当てることができません (不可能だと言っているわけではなく、方法がわからないだけです)。私の LI が のように定義されていれば、1. と 2. を満たすことができるように思えますがEmber.View、単純なユースケースのボイラープレートをたくさん書くことになります。

これが私のコードを含む jsbinです。目標は、私の名前を太字で表示することです。それが可能かどうか知りたいです。

4

1 に答える 1

2

アイテムビュークラスを書かずにはいられないと思います。ただし、定型文ではありません。

App.MyItemView = Ember.View.extend({
  classNameBindings: 'content.selected:selected'
});

ハンドルバー:

{{#collection contentBinding="view.options" itemViewClass="App.MyItemView"
              tagName="ul" itemTagName="li"}}
  {{view.content.selected}} – {{view.content.name}}
{{/collection}}

私の代替手段は、アイテムのコンテンツを追加の要素にラップすることです。

{{#collection contentBinding="view.options" tagName="ul" itemTagName="li"}}
  <div {{bindAttr class="view.content.selected:selected"}}>
    {{view.content.selected}} &ndash; {{view.content.name}}
  </div>
{{/collection}}

それに応じて CSS を調整します。

li > .selected {
  font-weight: bold;
}

この方法では、ビュー クラスを作成する必要はありませんが、HTML 構造への変更が受け入れられるかどうかはわかりません。

于 2013-03-04T13:03:24.463 に答える