1

私は単純なアプリケーションに取り組んでいます。アプリの一部として、より大きなコレクションのサブセットを表示するサイドバーがあります。プライマリ コレクションが右側に表示され、コレクション内のすべてのアイテムが表示されます。サイドバーには、フラグ「スター付き」が TRUE に設定されているアイテムのサブセットが表示されます。

このような「キャンペーン」と呼ばれる単純なコントローラーがあります...

var App = require('app');

App.CampaignsIndexController = Em.ArrayController.extend({

});

モデルはこんな感じ…

var App = require('app');
var attr = DS.attr;

App.Campaign = DS.Model.extend({

    name: DS.attr('string'),
    starred: DS.attr('boolean')

});

この例では、非常に基本的なものにします。

私たちの App Router は次のようにマッピングされます...

var App = require('app');

App.Router.map(function() {

    this.route('index', { path: '/'});

    this.resource('campaigns', { path: '/campaigns'}, function() {

        this.route('new', { path: '/new' });
        this.route('campaign', { path: '/:campaign_id' });

    });

});

プライマリ アプリケーション テンプレートは次のようになります。サイドバー ビューがテンプレートに直接配置されていることに注目してください。アウトレット{{ outlet page }}は、上記のルートがコンテンツをドロップする場所です。この例では、パス/campaignsは 内のすべてのキャンペーンのリストを表示し{{ outlet page }}ます。

<div id="app" class="">

    <div id="sidebar" class="">

        {{ view App.StarredCampaignsView }}

    </div>

    <div id="page" class="">

        {{ outlet page }}

    </div>

</div>

キャンペーンのルートは、レンダリングをページ アウトレットに接続します...

var App = require('app');

App.CampaignsCampaignRoute = Ember.Route.extend({

    renderTemplate: function(controller, model) {

        this.render({outlet: 'page'});

    }

});

私のジレンマ
渡されたコンテンツをバインドするためのベストプラクティスは何ですか

{{ view App.StarredCampaignsView }}

で見られる正確なコレクションを反映するように

{{ outlet page }}?

ボーナス ポイント
モデルに見られるブール値フラグ「スター付き」にセットをフィルタリングするためのベスト プラクティスは何ですか?

4

1 に答える 1

0

Bind it to a computed property defined inside the controller

Controller

filteredValues: function(){
  //returns all the records whose starred property is true
  return this.get('campaigns').filterProperty("starred"); 
}.property('campaigns.@each.starred')

Handlebars

<div id="sidebar" class="">
  {{#collection contentBinding="filteredValues"}}
    <b>{{view.content.name}}</b>
  {{/collection}}
</div>
于 2013-01-31T07:42:50.153 に答える