如何在使用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的路由对象。