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> 

希望這可以幫助任何人遇到相同的問題！