如何訪問Ember應用程序模板中的路由數據？

我沿着Ember 2.3的文檔，似乎無法找到任何非常基本的東西：如何訪問由主模板中的路由模型鉤子提供的值：application.hbs？如何訪問Ember應用程序模板中的路由數據？

路線/ client.js

// ... 
export default Ember.Route.extend({ 
    model() { 
     return { 
      navigation: [ 
       { 
        title: "Projects", 
        link: "projects" 
       }, 
       { 
        title: "My Specifications", 
        link: "specs" 
       } 
      ] 
     } 
    } 
});

模板/ application.hbs

<nav> 
    {{#each navigation as |navItem|}} 
     <li>{{#link-to navItem.link}} {{navItem.title}} {{/link-to}}</li> 
    {{/each}} 
</nav> 
{{outlet}}

因爲它是現在，導航對象是路由的模板訪問（client.hbs ）而不是應用程序模板。

來源

2016-02-03 Slavic

首先，您應該反對使用模板中的{{#each model.navigation ...}}對數據建模。其次，每條路線都與其模板相對應。在你的情況下，你需要應用程序路徑來顯示應用程序hbs中的模型數據。 –

這正是我不感興趣的@kristjan。我有一個（非常常見的）情況，我需要一個通常的路徑來提供要在父模板（application.hbs）內部訪問的數據。例如活動導航列表。 – Slavic

@Slavic每個具有自己的路線的模板是燼路。約定優於配置，但如果要在應用程序路徑中顯示導航模型，爲什麼不爲應用程序路徑返回多個模型？ – Craicerjack

這裏是它是如何做的（除非燼在將來的版本有更好的方式出現）：

路線/ client.js

// ... 
export default Ember.Route.extend({ 
    setupController() { 
     this.controllerFor('application').set('navigation', ["nav1", "nav2"]); 
    } 
});

感謝，伊萬的回答！

來源

2016-02-04 11:12:47 Slavic

重點是不是控制器的方法正確的地方，但是，是的 - 我同意這不是最好的地方 – Slavic

怎樣才能獲得通過路由的型號掛鉤的主模板

默認情況下的內部設置，將setupController掛鉤的路線內的值，餘燼將set the property model on your controller的承諾的決心返回值從model鉤的路線。

這意味着你可以只使用屬性model在你的模板訪問model.navigation：

<nav> 
    {{#each model.navigation as |navItem|}} 
     <li>{{#link-to navItem.link}} {{navItem.title}} {{/link-to}}</li> 
    {{/each}} 
</nav>

如果要使用不同的名稱，你可以自己重寫setupController鉤，並設置名稱：

export default Ember.Route.extend({ 
    // ... 
    setupController(controller, model) { 
    this.set('navigation', Ember.get(model, 'navigation')); 
    } 
    // ... rest of the code 
})

這意味着您現在可以在您的模板中使用navigation而不是model.navigation。另一種方法可能是添加alias控制器內的model屬性：

export default Ember.Controller.extend({ 
    navigation: Ember.computed.alias('model.navigation') 
    // ... rest of the code 
})

，這將使你以及使用navigation而不是model.navigation。

但是，如果您希望在應用程序中使用某種全局導航，則更好的方法是使用Service，您可以將其注入任何需要導航的控制器中。喜歡的東西：

// app/services/navigation.js 
export default Ember.Service.extend({ 
    items: null, 

    init() { 
    this._super(...arguments); 
    this.set('items', [{ 
     title: "Projects", 
     link: "projects" 
    }, { 
     title: "My Specifications", 
     link: "specs" 
    }]); 
    } 
});

然後注入其在控制器：

export default Ember.Controller.extend({ 
    navigation: Ember.service.inject() 
});

現在你有機會獲得導航在控制器的模板中。

來源

2016-02-04 11:44:24 nem035

我不關心使用另一個名稱訪問數據。對我來說，model.navigation完全可以。任務只是獲得這些數據。 – Slavic

@Slavic好吧，我明白我是如何誤解你的，我糾正了我的答案。如果需要，我還增加了關於如何實施更多全球導航的建議。 – nem035

不幸的是，一項服務似乎無法解決手頭的問題。這源於每個控制器都會對導航發言的事實（例如，將導航項目標記爲活動，但不僅限於此）。現在我傾向於setupController解決方案，雖然我不知道它是否能夠解決我所有的導航問題，但它確實是解決所問問題的具體解決方案。你有我的贊成票。 – Slavic

我會像這樣解決這個問題。創建一個接受自定義參數的導航組件。

模板application.hbs

在 client.js

現在

apiURL: 'navigations/client'

而且你的自定義組件定製navigation.js

resolvedRouteNavs: function() { 
    return DS.PromiseArray.create({ 
      promise: store.query(this.get('url'), { user? : userID?? }); 
    }) 
}.property('apiURL')

和custom-navigation.hbs。

{{#each resolvedRouteNavs as |navItem|}} 
    {{navItem.name}} 
{{/each}}

如果你使用靜態數組處理作爲導航

則不需要進行解析，並會簡單地出來把綁定的陣列，這是每個路徑不同。

client.js

navs: [{ name: '1', route: 'foo'}, { name: '2', route: 'bar' }]

一些-不同，place.js

navs: [{ name: 'blah', route: 'foo.bar'}, { name: 'meh', route: 'bar.foo' }]

而真正的模型鉤子應該包含從服務器中檢索數據。否則使用setupController鉤子。

setupController: function(controller, model) { 
     this._super(controller, model); 

     controller.setProperties({ 
      nav: [] 
     });

來源

2016-02-04 12:11:26

如何訪問Ember應用程序模板中的路由數據？

回答

相關問題