[英]Ember.js child route conflicts with main application outlet
我正在嘗試設置模板,以便根據模型中的布爾值顯示approved
,已disapproved
和all
照片。 這些路由都使用application.hbs
文件中的相同主插座(在下面引用)。
這些路線都可以正常運行,除非我從photos
→ approved/disapproved
→ photos
出發。 換句話說,當從approved
或disapproved
approved
狀態返回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
在所有其他路線上仍然處於活動狀態。 這表明那里可能存在一些沖突?
通過將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>
希望這可以幫助遇到相同問題的任何人!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.