[英]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. 我正在尝试设置模板,以便根据模型中的布尔值显示
approved
,已disapproved
和all
照片。 These routes all use the same main outlet in the application.hbs
file (referenced below). 这些路由都使用
application.hbs
文件中的相同主插座(在下面引用)。
These routes are working all fine, except when I go from photos
→ approved/disapproved
→ photos
. 这些路线都可以正常运行,除非我从
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). 换句话说,当从
approved
或disapproved
approved
状态返回photos
时,出口为空白(无控制台错误)。 Refreshing the page brings it back again. 刷新页面将其重新带回。
Here's how my router.js
is set up: 这是我的
router.js
的设置方式:
App.Router.map ->
@resource "photos", path: "/", ->
# additional child routes
@route "approved"
@route "disapproved"
@resource "photo",
path: ":photo_id"
The photos_routes.js
: 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
和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. 另一个问题是“所有照片”导航链接上的
activeClass
在所有其他路线上仍然处于活动状态。 This suggests there is perhaps some conflict there? 这表明那里可能存在一些冲突?
Solved by putting photos.index
as the base root, and then moving photos.hbs
into a photos
folder. 通过将
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
)
To get activeClass working, I then needed to link to photos.index
instead of photos
. 为了使activeClass正常工作,我需要链接到
photos.index
而不是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! 希望这可以帮助遇到相同问题的任何人!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.