Ember.js子路由与主应用程序出口冲突 [英] Ember.js child route conflicts with main application outlet

问题描述

我正在设置我的模板，以便显示批准的，被拒登和所有照片，基于我的模型中的布尔值。这些路线在 application.hbs 文件（以下参考）中使用相同的主要出口。

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).

这些路线是工作一切正常，除了当我从照片→ 已批准/被拒登→ 照片。换句话说，当从批准的或被拒登返回照片 $ c>，插座为空（没有控制台错误）。刷新页面再次返回。

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.

以下是我的 router.js 的设置：

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

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
)

application.hbs 和 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>

另一个问题是，$ code> activeClass 所有照片导航链接在所有其他路线上保持活动。这表明可能有一些冲突？

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?

推荐答案

通过放入 photos.index 作为基本根，然后将 photos.hbs 移动到照片文件夹中。

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
)

为了让activeClass工作，我需要链接到 photos.index 而不是照片。像这样：

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!

这篇关于Ember.js子路由与主应用程序出口冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！