将图像添加到导航答案

【问题标题】：Add image to navigation将图像添加到导航
【发布时间】：2013-10-31 14:41:16
【问题描述】：

我正在使用热毛巾模板，我想为每条导航路线添加不同的图像。我将如何做到这一点？目前它只是使用相同的图像。

这是我的路由代码

     function boot() {
        router.mapNav('home');
        router.mapNav('details');
        router.mapNav('myPage');

        log('Hot Towel SPA Loaded!', null, true);
        return router.activate('home');
    }

淘汰码

   <div id="frame">
        <ul class="project-list" data-bind="foreach: router.visibleRoutes">
            <li data-bind="css: { current: isActive }"><a data-bind="attr: { href: hash }" class=""
                href="#"><span class="image"><i class="icon-desktop"></i></span><span class="title"
                    data-bind="text:name"></span></a></li>
        </ul>
    </div>

【问题讨论】：

标签： knockout.js durandal hottowel

【解决方案1】：

您可以使用mapNav 其他重载，它将对象作为第一个参数，您可以在其中添加自定义属性，例如：

router.mapNav({url: 'myPage', image: 'icon-desktop'});
router.mapNav({url: 'myPage', image: 'icon-something'});
router.mapNav({url: 'myPage', image: 'icon-somethingelse'});

在你看来，你可以写：

<span class="image">
   <i data-bind="css: image"></i>
</span>

或者如果你想指定真实的图片网址，你也可以这样做：

router.mapNav({url: 'myPage', imageUrl: 'http://server.com/myimage.png'});

<span class="image">
   <img data-bind="attr: { scr: imageUrl }"></i>
</span>

为了避免与 durandal 自己的属性发生冲突，您可以将自定义设置放在 settings 对象上

router.mapNav({url: 'myPage', { settings: { image: 'icon-desktop'}});

在你看来：

<span class="image">
   <i data-bind="css: settings.image"></i>
</span>

【讨论】：