如何在使用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>

或Ugly Option2：在模型中使用图标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的路由对象。