2

我有一个菜单栏，我有 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 个模板并且仍然有不同的内容传递给它？

4

1 回答 1

1

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

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

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

然后，当您更改站点中的位置并想要更新菜单时，只需更新会话：

var newMenu = [{itemName: "item1"}, {itemName: "item2"}, {itemName: "etc"}];
Session.set("currentMenu", newMenu);
于 2013-03-23T18:08:20.427 回答