durandal - 如何在使用 Durandal 的 route 使用图标？

Question

我正在查看这些路由信息对象结构的文档，但没有找到任何内容。由于 Durandal 使用其他 JS 库，我不确定它属于什么(也许是 sammy？)。

我面临两个问题:问题 #1 我想在路线信息中使用一个图标，我发现我可以使用标题或标题来实现...丑陋的选择 1:在标题中使用图标信息

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

然后像这样做一些绑定(bind):

<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' }

绑定(bind)将是:

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

我个人喜欢选项 1，因为它是数据和显示的分离。但是属性(标题)不是放置它的最佳位置...还有什么其他选择？？？我看到人们使用设置，但同样，设置选项是什么？我可以创建自己的图标属性吗？

其他问题 如何设计子菜单...是否有引用父路由的属性？？

更新 8/23/2013 我找到了关于 Child Routers 的信息

Answer 1

您可以将自己的属性添加到route 对象。这就是 JavaScript 的好处!

所以正如你所说，你可以像这样向路由添加一个设置对象:

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

然后按照您之前的方式进行绑定(bind):

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

只需确保将在 UI 中绑定(bind)的所有对象都包含 settings.caption 或在绑定(bind)中添加额外的逻辑来管理属性为 undefined .