添加圖像到導航

Question

即時通訊使用熱毛巾模板，我想爲每個導航路線添加一個不同的圖像。我將如何實現這一目標？目前它只是使用相同的圖像。

這裏是我的路由

 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> 

Answer 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> 

或者，如果要指定真實圖像的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>