如何避免鐵路由器中的類似路由？

Question

對不起，英文不好。

我有四個選項卡標籤，每個標籤都有一個路由

<ul class="nav nav-tabs"> 
<li role="presentation"><a href="{{pathFor 'menu.tab1'">tab1</a></li> 
<li role="presentation"><a href="{{pathFor 'menu.tab2'">tab2</a></li> 
<li role="presentation"><a href="{{pathFor 'menu.tab3'">tab3</a></li> 
<li role="presentation"><a href="{{pathFor 'menu.tab4'">tab4</a></li> 
</ul> 

而且route.js

this.route('/menu/tab1', { 
    name: 'menu.tab1', 
    template: 'MenuTab1', 
});   
this.route('/menu/tab2', { 
    name: 'menu.tab2', 
    template: 'MenuTab2', 
}); 
this.route('/menu/tab3', { 
    name: 'menu.tab3', 
    template: 'MenuTab3', 
}); 
this.route('/menu/tab4', { 
    name: 'menu.tab4', 
    template: 'MenuTab4', 
}); 

我可以簡化這些類似的代碼？

Answer 1

正如@Petr所示，您可以重構代碼以使用數組。

var tabs = [{ 
    label: "tab1", 
    route: { 
    path: "/menu/tab1", 
    name: "menu.tab1", 
    template: "MenuTab1" 
    } 
},{ 
    [...] 
}]; 

tabs.forEach(function(tab){ 
    var route = tab.route; 
    Router.route(route.path,{ 
    name: route.name, 
    template: route.template 
    }); 
}); 

Template.tabs.helpers({ 
    tabs: tabs 
}); 

HTML

<template name="tabs"> 
    <ul class="nav nav-tabs"> 
    {{#each tabs}} 
     <li role="presentation"> 
     <a href="{{pathFor route.name}}">label</a> 
     </li> 
    {{/each}} 
    </ul> 
</template> 

如果你的標籤遵循有關命名方案的精確模式，你甚至可以FO進一步：

var tabs = [{ 
    id: "tab1", 
    label: "Tab 1" 
},{ 
    [...] 
}]; 

tabs = tabs.map(function(tab){ 
    function capitalizeFirstLetter(string) { 
    return string.charAt(0).toUpperCase() + string.slice(1); 
    } 
    // 
    return { 
    label: tab.label, 
    route: { 
     path: "/menu/" + tab.id, 
     name: "menu." + tab.id, 
     template: "Menu" + capitalizeFirstLetter(tab.id) 
    } 
    }; 
});