Question

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

这些路线一切正常，除非我从photos→approved/disapproved→photos开始。换句话说，当从photos或approved返回disapproved时，插座为空（没有控制台错误）。刷新页面会再次恢复。

以下是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>

希望这有助于任何人遇到同样的问题！

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

1 个答案: