Ember.js 子路由与主应用程序出口冲突

Question

我正在尝试设置我的模板，使其根据我模型中的布尔值显示approved、disapproved 和all 照片。这些路由都使用application.hbs 文件中的相同主插座（参考如下）。

这些路线一切正常，除了我从photos → approved/disapproved → photos。换句话说，当从approved 或disapproved 返回photos 时，出口是空白的（没有控制台错误）。刷新页面会将其重新恢复。

这是我的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>

另一个问题是“所有照片”导航链接上的activeClass 在所有其他路线上仍然有效。这表明那里可能存在一些冲突？

Answer 1

通过将photos.index 作为基本根，然后将photos.hbs 移动到photos 文件夹来解决。

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 而不是 photos。像这样：

{{!-- 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>

希望这对遇到同样问题的人有所帮助！