Databases
StackOverflow2013
Postsdbo
POEmber.js problems binding content of array controller to content of a different array controller
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POEmber.js problems binding content of array controller to content of a different array controller
    primarykey
    data
    text
    <p>We're having trouble linking the content of one array controller with the content of another array controller in Ember.js. We've scoured Stackoverflow, but no solution seems to work for us.</p> <p>The scenario is simple. We have a model called "Campaign". The model is pretty basic and looks like this...</p> <p><strong>Campaign Model:</strong></p> <pre><code>App.Campaign = DS.Model.extend({ name: DS.attr('string'), description: DS.attr('string'), opts: DS.attr('string'), starred: DS.attr('boolean'), keywords: DS.hasMany('App.Keyword') }); // Create dummy campaign array App.Campaign.FIXTURES = new Array(); // Populate dummy campaign array ... </code></pre> <p>The Campaign controller is also basic. It's a simple ArrayController with nothing going on inside it ...</p> <p><strong>Campaign Index Controller:</strong></p> <pre><code>App.CampaignsIndexController = Em.ArrayController.extend({ }); </code></pre> <p>For the sake of this question, we've stripped our application template down to the essentials. As you can see below, the application template has a sidebar. In the sidebar are two views. One view is for the site's navigation, the other view is for "Starred Campaigns". This view will contain a subset of the overall collection of campaigns.</p> <p><strong>Application Template:</strong></p> <pre><code>&lt;!-- ================================================== --&gt; &lt;!-- ======================= APP ====================== --&gt; &lt;!-- ================================================== --&gt; &lt;div id="app" class=""&gt; &lt;!-- ================================================== --&gt; &lt;!-- ==================== SIDEBAR ===================== --&gt; &lt;!-- ================================================== --&gt; &lt;div id="sidebar"&gt; {{ view App.NavigationView }} {{ view App.StarredCampaignsView controller="App.StarredCampaignsController" }} &lt;/div&gt; &lt;!-- ================================================== --&gt; &lt;!-- ====================== PAGE ====================== --&gt; &lt;!-- ================================================== --&gt; &lt;div id="page" class=""&gt; {{ outlet page }} &lt;/div&gt; &lt;/div&gt; </code></pre> <p>We have a controller for Starred Campaigns. This is where things start to get confusing. In our controller, we bind the content of the ArrayController to the content of the CampaignsIndexController, which holds the array of all Campaign models.</p> <p><strong>Starred Campaigns Controller:</strong></p> <pre><code>App.StarredCampaignsController = Em.ArrayController.extend({ content: [], contentBinding: Ember.Binding.oneWay('App.CampaignsIndexController.content') }); </code></pre> <p>The view of for Starred Campaigns is also very simple...</p> <p><strong>Starred Campaigns View:</strong></p> <pre><code>App.StarredCampaignsView = Em.View.extend({ templateName: 'templates/layout/starred-campaigns', }); </code></pre> <p>And this is what the template for Starred Campaigns looks like. It is attempting to loop over the items in the controller.content and pass them off to another view.</p> <p><strong>Starred Campaigns Template:</strong></p> <pre><code>&lt;h5 class="sidebar-title"&gt;Starred Campaigns&lt;/h5&gt; &lt;ul class="starred-campaigns clearfix"&gt; {{# each item in controller.content }} {{ view App.StarredCampaignItemView itemBinding="item" }} {{/ each }} &lt;/ul&gt; </code></pre> <p>However, despite all of this, the content in StarredCampaignsController remains empty, even when we populate the App.Campaign array that is represent by App.CampaignsIndexController. See any problems with our approach? I feel like we're missing something really simple here.</p>
    singulars
    1. This table or related slice is empty.
    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. POEmber.js problems binding content of array controller to content of a different array controller
      1. This table or related slice is empty.
      1. VTUpMod
    1. COThere's also a better way to insert views like that. Take your `NavigationView`, you're rendering it well enough in the page, but wouldn't it be better if it had its own controller? If you use: `{{render "navigation"}}`, then Ember will automatically place `App.NavigationView` in there, and it will have access to `App.NavigationController`.
      singulars
      1. POEmber.js problems binding content of array controller to content of a different array controller
      1. USWildhoney
 

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