What is the Ember.js best practice for updating sidebar view content?

Question

I'm working on a simple application. As part of the app, there is a sidebar that displays a subset of a larger collection. The primary collection is displayed on the right and shows all items in the collection, where the sidebar shows a subset of items that have a flag "starred" set to TRUE.

I have a simple Controller called "Campaigns" that looks like this...

var App = require('app');

App.CampaignsIndexController = Em.ArrayController.extend({

});

The model looks like this...

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

App.Campaign = DS.Model.extend({

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

});

Keeping it really basic for this example.

Our App Router maps as follows...

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' });

    });

});

The primary Application template looks like this. Notice how the sidebar view is directly placed into the template. The outlet {{ outlet page }} is where the routes above would drop their content. In this example, the path /campaigns would display a list of all the campaigns in {{ outlet page }} .

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

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

        {{ view App.StarredCampaignsView }}

    </div>

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

        {{ outlet page }}

    </div>

</div>

The route for campaigns connects render to the page outlet...

var App = require('app');

App.CampaignsCampaignRoute = Ember.Route.extend({

    renderTemplate: function(controller, model) {

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

    }

});

My dilemma
What is the best practice for binding the content passed into

{{ view App.StarredCampaignsView }}

so that it reflects the exact collection seen in

{{ outlet page }} ?

Bonus Points
What is the best practice for filtering the set to the boolean flag 'starred' seen in the model?

Answer 1

Bind it to a computed property defined inside the controller

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

<div id="sidebar" class="">
  {{#collection contentBinding="filteredValues"}}
    <b>{{view.content.name}}</b>
  {{/collection}}
</div>