CODEWITHSUNDEEP
ember.js
Andrew
Andrew

Reputation: 1013

Looping through model in unrelated template in ember

I apologize if I am missing some key concepts here. I am brand new to ember and don't feel like I fundamentally "get it" yet.

In the app I'm working on, there is is a sidebar which needs to display all of the user's albums regardless of the route the user is on.

Inside of this sidebar template I want to do something like this where I render an album template for each album.

{{#each App.AlbumsController}}
  {{render "albums.album_link" this}
{{/each}}

edit: Importantly, I do not want album to be the model for the application controller because I want to render at least one more model in this same sidebar and be able to switch between them.

Based off of advice at : Sort content of ArrayController (not sure whats going on with the {{#view App.RecordView}}. Is that important? )

I have no 'albums' route as this sidebar is the only place the albums index will ever be displayed and it doesn't need its own view.

App.AlbumsController = Ember.ArrayController.extend({
  content: [],
  sortProperties: ['title'],
  sortAscending: false 
});

When this is evaluated it gets an error in the console: Uncaught Error: Assertion Failed: The value that #each loops over must be an Array. You passed App.AlbumsController

I think my problem lies in the fact that I do not understand what the "content" attribute on an arrayController does and I'm probably not setting this up correctly to load the album objects into the controller

I've created a bin with my failed attempt at looping the albums in the sidebar template: http://jsbin.com/nufusa/9/edit

Upvotes: 0

Views: 166

Answers (2)

Andrew
Andrew

Reputation: 1013

To get this to come out right, instead of:

App.AlbumsController = Ember.ArrayController.extend({
  content: [],
  sortProperties: ['title'],
  sortAscending: false 
});

it was important to create instead of extend the ArrayController in a single line and then set it's properties seperately.

App.albumsController = Ember.ArrayController.create();

App.albumsController.set('sortProperties', ['title']);
App.albumsController.set('content', App.Album.FIXTURES);

working js.bin: http://jsbin.com/nufusa/10/edit

Upvotes: 0

Greg Funtusov
Greg Funtusov

Reputation: 1447

If the sidebar content will be the same across all routes, the easiest way would be to define the albums as the application route model:

# Route
var App.ApplicationRoute = Em.Route.extend({
  model: function() {
    # Retrieve your albums, depending on where you store that data
  }
})

# Outernmost template (application.hbs)
<div class="sidebar">
  {{#each}}
    {{render "albums.album_link" this}}
  {{/each}}
</div>
<div class="main">
  {{ outlet }}
</div>

If different routes will have different sidebars, use outlets to display the sidebar. You can target the sidebar outlet like this:

var App.SomeRoute = Ember.Route.extend({
  renderTemplate: function() {
    this.render();
    this.render('sidebar/something', {
      into: 'application',
      outlet: 'sidebar'
    });
  }
});

You can find more information about rendering templates in outlets in the ember guide: http://emberjs.com/guides/routing/rendering-a-template/

Upvotes: 1

Related Questions