Databases
StackOverflow2013
Postsdbo
POWhat is the Ember.js best practice for updating sidebar view content?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhat is the Ember.js best practice for updating sidebar view content?
    primarykey
    data
    text
    <p>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.</p> <p>I have a simple Controller called "Campaigns" that looks like this...</p> <pre><code>var App = require('app'); App.CampaignsIndexController = Em.ArrayController.extend({ }); </code></pre> <p>The model looks like this...</p> <pre><code>var App = require('app'); var attr = DS.attr; App.Campaign = DS.Model.extend({ name: DS.attr('string'), starred: DS.attr('boolean') }); </code></pre> <p>Keeping it really basic for this example.</p> <p>Our App Router maps as follows...</p> <pre><code>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' }); }); }); </code></pre> <p>The primary Application template looks like this. Notice how the sidebar view is directly placed into the template. The outlet <code>{{ outlet page }}</code> is where the routes above would drop their content. In this example, the path <code>/campaigns</code> would display a list of all the campaigns in <code>{{ outlet page }}</code>.</p> <pre><code>&lt;div id="app" class=""&gt; &lt;div id="sidebar" class=""&gt; {{ view App.StarredCampaignsView }} &lt;/div&gt; &lt;div id="page" class=""&gt; {{ outlet page }} &lt;/div&gt; &lt;/div&gt; </code></pre> <p>The route for campaigns connects render to the page outlet...</p> <pre><code>var App = require('app'); App.CampaignsCampaignRoute = Ember.Route.extend({ renderTemplate: function(controller, model) { this.render({outlet: 'page'}); } }); </code></pre> <p><strong>My dilemma</strong><br> What is the best practice for binding the content passed into </p> <p><code>{{ view App.StarredCampaignsView }}</code> </p> <p>so that it reflects the exact collection seen in </p> <p><code>{{ outlet page }}</code>?</p> <p><strong>Bonus Points</strong><br> What is the best practice for filtering the set to the boolean flag 'starred' seen in the model?</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USJohn Ashenden
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POWhat is the Ember.js best practice for updating sidebar view content?
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    2. VO
      singulars
      1. POWhat is the Ember.js best practice for updating sidebar view content?
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload