添加图像到导航

即时通讯使用热毛巾模板，我想为每个导航路线添加一个不同的图像。我将如何实现这一目标？目前它只是使用相同的图像。添加图像到导航

这里是我的路由

 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>

来源

2013-10-31 Ricardo

可以使用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>

或者，如果要指定真实图像的URL，你也可以这样做：

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

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

Alternativly避免与Durandal的自己的属性冲突，你可以把一个settings对象上的自定义设置

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

而在你的看法：

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

来源

2013-10-31 06:30:46 nemesv

添加图像到导航

回答

相关问题