1

私の Ember.js アプリケーション内のビューのコントローラーでは、Travel 型の配列と、現在のユーザーの旅行の好みに関する別の値を取得しています。

ビュー内で、現在の旅行の種類がユーザーの好みの旅行の好みであるかどうかに基づいて、要素に CSS クラスを追加する必要があります。

これは私が得た限りですが、2つを接続する方法を考えられないようです? どんな助けでも大歓迎です。

この投稿のために値はハードコーディングされていますが、travelType と travelPreferences は AJAX 呼び出し (および Ember オブジェクトの使用) の結果です。

コントローラ：

App.IndexController = Em.ArrayController.extend({
    user: {
         travelPreferences: [
              "1", 
              "3"
         ]
    }
    travelTypes: [
         { TravelTypeID: '1', TravelTypeDescription: 'Car' }, 
         { TravelTypeID: '2', TravelTypeDescription: 'Train' }, 
         { TravelTypeID: '3', TravelTypeDescription: 'Walking' }, 
         { TravelTypeID: '4', TravelTypeDescription: 'Bike' }
    ]
});

意見

<ul>
    {{#each travelTypes}}
        <li>{{TravelTypeDescription}}</li>
    {{/each}}
</ul>

では、travelPreferences 配列の ID が travelType の ID と一致するかどうか<li>を入力する必要があります。class="preferred"

4

2 に答える 2

2

まず、通常の JavaScript オブジェクトを Ember オブジェクトに変更して、ビンギング機能を使用できるようにします。

    user: Ember.Object.create({
        travelPreferences: [
            "1",
            "3"
        ]
    }),
    travelTypes: [
    Ember.Object.create({
        TravelTypeID: '1',
        TravelTypeDescription: 'Car',
        preferred: false
    }),
    Ember.Object.create({
        TravelTypeID: '2',
        TravelTypeDescription: 'Train',
        preferred: false
    }),
    Ember.Object.create({
        TravelTypeID: '3',
        TravelTypeDescription: 'Walking',
        preferred: false
    }),
    Ember.Object.create({
        TravelTypeID: '4',
        TravelTypeDescription: 'Bike',
        preferred: false
    })],

次に、現在のユーザー設定の変化を観察し、旅行の種類の優先プロパティを更新します。

onUserPreferencesChanged: function () {
    var controller = this;
    controller.get('travelTypes').map(function (travelType) {
        travelType.set('preferred', false);
    });
    this.get('user.travelPreferences').map(function (prefId) {
        controller.get('travelTypes').filterProperty('TravelTypeID', prefId).map(function (travelType) {
            travelType.set('preferred', true);
        });
    });
}.observes('user.travelPreferences.@each'),

最後に、旅行の種類のリストにある各旅行の種類の優先フラグにバインドします。

    <ul> 
        {{#each travelTypes}} 
        <li {{bindAttr class = "preferred"}}>
            {{TravelTypeDescription}} 
        </li>
        {{/each}}
    </ul>

これは、すべてをまとめるための実用的なフィドル です。これはおそらく最もクリーンな解決策ではありません。おそらく、少し読んだ後により良い解決策が見つかるでしょう。

于 2013-02-06T13:03:17.370 に答える
0

私は最近、配列を反復処理し、条件付きロジックを使用してアイテムの反映方法を変更するという点で、同様の質問をしました。私が提供された答えは私にとって非常にうまくいきました。見る：

条件付きロジックに基づいてビューをテンプレートに挿入するハンドルバー ヘルパー

ArrayController を使用して、移動タイプを反復処理することをお勧めします。次に、itemController (ObjectController を拡張) を指定して、各要素の表示を制御します。ObjectController にはメソッドgetTravelTypeClassを含めることができます。このメソッドを使用して、いくつかのロジックに基づいて各旅行タイプの目的のクラスを返すことができます。

于 2013-02-06T13:02:03.457 に答える