CODEWITHSUNDEEP
ember.jsember-data
ru3sch
ru3sch

Reputation: 796

Ember.js models not being rendered in nested route

I have an Ember app setup, and when visiting /playlist/1, it renders the templates as expected. However, the model data isn't being displayed. I have a playlist.hbs file with an outlet, and a playlist folder with index.hbs inside of that folder with html and handlebars to display data. I have both App.PlaylistIndexController & App.PlaylistIndexRoute defined.

App.Router.map(function() {
    this.resource('account', {path: '/account/:accountId'}, function() {
        this.route('login');
    });

    this.resource('playlist', { path: '/playlist/:playlist_id'}, function() {
        this.route('edit');
  });
});

FWIW, everything was working properly prior to adding the nested route (with my controller and route defined as App.PlaylistController and App.PlaylistRoute respectively)

"playlist":{"id":1,"name":"playlistname"}

Any ideas how to get the playlist data to display properly?

UPDATE:

App.PlaylistIndexRoute = App.AuthenticatedRoute.extend({
    setupController: function(controller, model) {
        this._super(controller, model);     
        var online = this.get('store').find('account');
        this.controllerFor('playlistViewers').set('model', online);
    },
});

<div id="main">
  <div id="primary">
    <section id="playlist">
      <header class="playlist-header">
        <h2>Playlist</h2>
        <h1>{{name}}</h1>       
      </header><!--.playlist-header-->

      <div class="playlist-content">
        <ul>

          {{#each song in songs}}
            <li {{action 'play' song}} class="show-for-mobile">
              <button {{bind-attr class="song.isPlaying:icon-volume-up:icon-play song.isStreaming:icon-adjust"}} ></button>
              <div class="song-meta"> 
                <span class="song-name">{{song.name}}</span>
                <span class="song-artist">{{song.artist}}</span>
              </div><!--.song-meta-->
            </li>
          {{/each}}
        </ul>       
      </div><!--.playlist-content-->
    </section><!--#playlist-->
  </div><!--#primary-->

{{partial "sidebar"}}

That's my current playlist/index.hbs file, but even {{name}} displays nothing

Upvotes: 0

Views: 152

Answers (1)

Ryan
Ryan

Reputation: 3594

Your PlaylistIndexRoute needs to have a model. This can be the model that was loaded by the playlist resource.

App.PlaylistIndexRoute = App.AuthenticatedRoute.extend({
  model: function() {
    return this.modelFor('playlist');
  }
});

Upvotes: 4

Related Questions