Question

我添加了一个带有引导程序的导航栏到我的页面。单击导航链接时，我正在寻找一种方法，根据所选的选项在导航栏下方加载不同的模板，而不更改URL路由并将导航栏保持在其位置。我当前的问题是，当我单击链接时，导航栏将消失，模板将加载到单个页面中。

有什么建议吗？

<template name="eventContainer">
{{#if currentUser}}
    {{#each eventTag}}
        <nav role="navigation">
            <ul class="nav nav-tabs">
                <h5 class="panel-title"> {{title}} </h5>
                <li role="presentation" class="active"><a href="/newMatches"> {{eventMatchesCount eventCode}} Peers</a></li>
                <li role="presentation"><a href="/members"> {{eventMembersCount eventCode}} Members </a></li>
            </ul>
        </nav>           
    {{/each}}
{{/if}}         
</template>

Answer 1

实际上，我这样解决了。加载主页时加载选项卡内的所有模板，而不是当用户浏览选项卡时加载，这对我来说不是一个大问题，因为我有很少的选项卡。

<template name="eventContainer">
Event List
<nav>
  <div>
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
      <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
      <li role="presentation"><a href="#newmatches" aria-controls="newmatches" role="tab" data-toggle="tab">New Matches</a></li>
      <li role="presentation"><a href="#members" aria-controls="members" role="tab" data-toggle="tab">Members</a></li>
      <li role="presentation"><a href="#findevent" aria-controls="findevent" role="tab" data-toggle="tab">Find Event</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
      <div role="tabpanel" class="tab-pane active" id="home">{{ > home}}</div>
      <div role="tabpanel" class="tab-pane" id="newmatches">{{> newMatches}}</div>
      <div role="tabpanel" class="tab-pane" id="members">{{> members}}</div>
      <div role="tabpanel" class="tab-pane" id="findevent">{{> findEvent}}</div>
    </div>
  </div>
</nav>
</template>

在导航栏中显示内容（引导程序）

1 个答案: