2

メニューバーがあり、3つの異なるページがあります。現在のページによって、メニューバーの内容が異なります。内容が違うので、3種類のテンプレートを作成しました。ただし、メニューバーの構造は内容以外は同じなので、重複コードが多いことがわかります。テンプレートを1つだけにして、表示しているページに応じてメニューバー内のコンテンツを異なる方法で入力する方法はありますか？

テンプレート1の内容を設定します（他の2つのテンプレートについても同じことを行いますが、名前だけが異なります）。

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

実際のテンプレート（他の2つのテンプレートでも同じことをしますが、名前だけが異なります）：

<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 に答える