如何在使用Durandal的路線中使用圖標？

Question

我正在四處尋找這些route-info對象的結構文檔，但是我沒有找到任何。由於Durandal使用其他JS庫，我不確定這屬於什麼（也許sammy？）。

我面臨兩個問題： 問題＃1我想在路由信息使用的圖標，我發現我可以用標題或標題來實現這一目標？ 醜方法1：使用圖標在標題

{ route: 'dashboard', title: 'Dashboard', moduleId: 'viewmodels/dashboard', nav: true, caption: 'icon-dashboard' }, 

和信息做一些這樣的結合：

<i data-bind="attr: { 'class': caption}"></i> 
<a data-bind="attr: { href: hash }, html: title"></a> 

或醜陋的選項2：使用圖標的HTML代碼模型

{ route: 'dashboard', title: 'Dashboard', moduleId: 'viewmodels/dashboard', nav: true, caption: '<i class="icon-plus-sign"></i> Dashboard' } 

和結合將是：

<a data-bind="attr: { href: hash }, html: caption"></a> 

我個人喜歡的選項1中，由於是數據和顯示的分離。但財產（標題）不是放置它的最佳地點...還有什麼其他選擇？我看到有人在使用設置，但是又是什麼設置選項？我可以創建自己的圖標屬性嗎？

其他問題如何設計子菜單...如果有一個屬性來引用父路由？

更新2013年8月23日我發現這個信息約Child Routers

Answer 1

您可以添加自己的屬性到route對象。這是關於JavaScript的好事！

所以就像你說的，你可以添加一個設置對象，以這樣的路線：

{ route: 'dashboard', title: 'Dashboard', moduleId: 'viewmodels/dashboard', nav: true, settings : { caption: 'icon-dashboard', another :'property'} } 

而只是做了綁定，您在做同樣的方式：

<i data-bind="attr: { 'class': settings.caption}"></i> 
<a data-bind="attr: { href: hash }, text: title"></a> 

只要確保將在UI中綁定的所有對象都包含settings.caption或在綁定中添加額外的邏輯以管理屬性爲undefined的路由對象。