CODEWITHSUNDEEP
javascriptmodel-view-controllerember.jsember-data
gosseti
gosseti

Reputation: 975

Ember.js child route conflicts with main application outlet

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?

Upvotes: 0

Views: 138

Answers (1)

gosseti
gosseti

Reputation: 975

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!

Upvotes: 1

Related Questions