javascript - 由于内容不同，Meteor 重复模板

Question

我有一个菜单栏和 3 个不同的页面。根据我所在的页面，菜单栏中的内容会有所不同。由于内容不同，我创建了 3 个不同的模板。但是，菜单栏的结构除了内容之外都是一样的，所以我发现我有很多重复的代码。有没有一种方法可以只使用一个模板并根据您所在的页面以不同方式填充菜单栏内的内容？

设置模板1的内容(我对其他两个模板做同样的事情，只是名称不同):

Template.pictureMenu.contents = function(){
  ...
};

实际模板(我对其他两个模板做同样的事情，只是名称不同):

<template name="pictureMenu">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="container">
        <a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse"> <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </a>
        <a class="brand" href="#">Media Menu</a>
        <div class="nav-collapse collapse">
          <ul class="nav">
            <li>
                <a href="#">Upload</a>
            </li>
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">Playlists<b class="caret"></b></a>
              <ul class="dropdown-menu">
                **{{#each contents}} <!-- This is the only thing that changes-->
                  <li>
                      <a href="#" class="viewPlaylist">{{this}}</a>
                  </li>
              {{/each}}**
              </ul>
            </li>
            <li>
                <a href="#">Share</a>
            </li>
          </ul>
          <form action class="navbar-search pull-right">
              <input class="search-query span2" placeholder="Search" type="text">
          </form>
        </div>
      </div>
    </div>
  </div>
</template> 

我如何将它减少到 1 个模板并仍然向其传递不同的内容？

Answer 1

您可以将模板重命名为“菜单”，然后在内容不同的位置插入特定内容:

<template name="menu">
  ...
  <ul class="dropdown-menu">
    {{#each currentMenu}}
      <li>{{itemName}}</li>
    {{/each}}
  </ul>
  ...
</template>

Template.menu.currentMenu = function() {
  return Session.get("currentMenu");
}

然后，当您更改站点中的位置并且想要更新菜单时，只需更新 session :

var newMenu = [{itemName: "item1"}, {itemName: "item2"}, {itemName: "etc"}];
Session.set("currentMenu", newMenu);