Ember.js child route conflicts with main application outlet

Question

I'm trying to set up my template so it displays approved , disapproved and all photos, based off a boolean in my model. These routes all use the same main outlet in the application.hbs file (referenced below).

These routes are working all fine, except when I go from photos → approved/disapproved → photos . In other words, when returning back to photos from either approved or disapproved , the outlet is blank (with no console errors). Refreshing the page brings it back again.

Here's how my router.js is set up:

App.Router.map ->
  @resource "photos", path: "/", ->
    # additional child routes
    @route "approved"
    @route "disapproved"
    @resource "photo",
      path: ":photo_id"

The photos_routes.js :

App.PhotosRoute = Ember.Route.extend(
  model: ->
    @store.find 'photo'
)

App.PhotosApprovedRoute = Ember.Route.extend(
  model: ->
    @store.filter 'photo', approved: true, (photo) ->
      photo.get 'approved'
  renderTemplate: (controller) ->
    @render 'photos',
      into: 'application'
      controller: controller
)

App.PhotosDisapprovedRoute = Ember.Route.extend(
  model: ->
    @store.filter 'photo', approved: false, (photo) ->
      not photo.get 'approved'
  renderTemplate: (controller) ->
    @render 'photos',
      into: 'application'
      controller: controller
)

The application.hbs and photos.hbs

{{!-- application.hbs --}}

<ul>
  <li>{{#link-to "photos" activeClass="selected"}}All photos{{/link-to}}</li>
  <li>{{#link-to "photos.approved" activeClass="selected"}}Approved{{/link-to}}</li>
  <li>{{#link-to "photos.disapproved" activeClass="selected"}}Disapproved{{/link-to}}</li>
</ul>

{{outlet}}

{{!-- photos.hbs --}}

<ul>
  {{#each controller}}
    <li {{bind-attr class=":masonry-brick approved:photo__approved:photo__disapproved"}}>
      {{input type="checkbox" checked=approved class="toggle"}}
      <img {{bind-attr src=image_url}} alt="Logo">
    </li>
  {{else}}
    <li>There are no photos.</li>
  {{/each}}
</ul>

Another issue is that the activeClass on the 'All photos' navigation link remains active on all other routes. This suggests there is perhaps some conflict there?

Answer 1

Solved by putting photos.index as the base root, and then moving photos.hbs into a photos folder.

App.PhotosIndexRoute = Ember.Route.extend(
  model: ->
    @store.find "photo"
)

App.PhotosApprovedRoute = Ember.Route.extend(
  model: ->
    @store.filter 'photo', approved: true, (photo) ->
      photo.get 'approved'
  renderTemplate: (controller) ->
    @render 'photos/index',
      into: 'application'
      controller: controller
)

App.PhotosDisapprovedRoute = Ember.Route.extend(
  model: ->
    @store.filter 'photo', approved: false, (photo) ->
      not photo.get 'approved'
  renderTemplate: (controller) ->
    @render 'photos/index',
      into: 'application'
      controller: controller
)

To get activeClass working, I then needed to link to photos.index instead of photos . Like this:

{{!-- application.hbs --}}

<ul>
  <li>{{#link-to "photos.index" activeClass="selected"}}All photos{{/link-to}}</li>
  <li>{{#link-to "photos.approved" activeClass="selected"}}Approved{{/link-to}}</li>
  <li>{{#link-to "photos.disapproved" activeClass="selected"}}Disapproved{{/link-to}}</li>
</ul>

Hope this helps anyone running into the same issue!