1

問題は次のとおりです。このアプリケーションには、いくつかのボタン、ナビゲーションアイコンなどがあり、クリックされたときに「選択」されます。複数の要素を同時にマークすることができます。

これを実行したい2番目の理由は、emberjs.comで新しいガイドを読んだときに、テンプレートは以前に述べた以上に使用する必要があり、テンプレートはDOMをレンダリングする責任があり、ビューは高度なイベント（存在する場合）を処理するため、またはアプリケーションで再利用される共通/共有コンポーネントを作成するために使用されます。

現在、ビューはこれを処理しています。

app.NavView = Ember.CollectionView.extend({
    ...
    itemViewClass: Ember.View.extend({
        ...
        classNameBindings: ['isSelected:selected']
        isSelected: function () {
            return this.get('controller.selected') === this.get('content');
        }.property('controller.selected')
    })
});

ただし、ビューが基本的に実行しているのはこれだけです。ビュー全体を削除して、このためのテンプレートを使用したいと思います。

テンプレートアプローチを試してみて、ビューの概念全体を削除しました。

<div id="main-menu">
    {{#each content}}
    <div {{bindAttr class="controller.isSelected:selected"}}>
        {{{iconsvg}}}
        {{name}}
    </div>
    {{/each}}
</div>

しかし、ここでの私の問題は、bindAttrがコンテキストを認識しておらず、これをコントローラーのisSelectedプロパティに「送信」して、この要素が選択されているかどうかを評価できないことです。

ビューなしでこれを行うための良い解決策はありますか、それともビューを使用することを余儀なくされていますか？それとも、テンプレート/ビュー/コントローラーの設計部分と責任が間違っていると思いますか？

どんな反応でも大歓迎です！

4

1 に答える 1

0

現在のドキュメント: http://emberjs.com/guides/templates/displaying-a-list-of-items/現在のコンテキストをオーバーライドしない {{each}} ヘルパーの使用方法を説明する言及があります.

あなたの場合、これは次のようになります。

<div id="main-menu">
  {{#each item in controller}}
  <div {{bindAttr class="isSelected:selected"}}>
    {{{item.iconsvg}}}
    {{item.name}}
  </div>
  {{/each}}
</div>

{{bindAttr}} の「controller」への参照を削除したことに注意してください。これは、ember コントローラーであり、現在のコンテキストであると想定しているため、基本的に isSelected は controller.isSelected と同等です。

于 2013-01-16T13:15:45.380 に答える