如何避免铁路由器中的类似路线？

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>

如果您的选项卡遵循关于命名方案的确切模式，您甚至可以更进一步：

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)
    }
  };
});

如何避免铁路由器中的类似路线？

How to avoid similar route in iron-router?

meteor

iron-router