嵌入导航栏下拉菜单时的 Meteor 帐户-ui 下拉菜单行为

Question

我正在尝试将标准 Meteor 帐户-ui 放入带有 cog 图标的导航栏下拉菜单，如下面的屏幕截图和代码 sn-p 所示。但是，出现了两个问题：

1. 在登录之前，右侧有一个奇怪的额外空白。登录后，一切正常。
2. 单击下拉列表中的任何元素后，下拉列表会立即关闭。当我单击Sign in with Google 或Sign in 时这很好，但当我单击文本输入字段Forgot password 或Create account 时不应该这样做。

如何在仍然使用accounts-ui 包的同时解决上述问题？例如，是否有某种 JS 代码可以用来覆盖修复 #2 的行为？谢谢！

  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <ul class="nav navbar-nav navbar-right"> 
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="account-dropdown"><span class="glyphicon glyphicon-cog"></span>{{loginText}}</a>
            <ul class="dropdown-menu">
              <li><b>{{> loginButtons align="right"}}</b></li>
            </ul>
          </li>
        </ul>
     </div>
  </nav>

Answer 1

ian:accounts-ui-bootstrap-3 提供了一个开箱即用的 Bootstrap 下拉菜单。代码将如下所示：

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container-fluid">
      <ul class="nav navbar-nav navbar-right"> 
        {{> loginButtons}}
      </ul>
   </div>
</nav>

但这不会显示齿轮。如果要将默认下拉链接覆盖到自定义下拉链接，则需要覆盖包中的模板。 AFAIK，Meteor core 没有简单的方法来做到这一点，但您可以使用aldeed:template-extension 来非常简单地实现这一点。先从accounts-ui-bootstrap-3 repo复制模板代码，然后新建一个内容相似但名称不同的模板：

<template name="my_loginButtonsLoggedInDropdown">
  <li id="login-dropdown-list" class="dropdown">
    <a class="dropdown-toggle"  data-toggle="dropdown">
      ... custom content here ...
    </a>
    <div class="dropdown-menu col-sm-3">
      {{#if inMessageOnlyFlow}}
        {{> _loginButtonsMessages}}
      {{else}}
        {{#if inChangePasswordFlow}}
          {{> _loginButtonsChangePassword}}
        {{else}}
          {{> _loginButtonsLoggedInDropdownActions}}
        {{/if}}
      {{/if}}
    </div>
  </li>
</template>

然后使用

Template.my_loginButtonsLoggedInDropdown.replaces("_loginButtonsLoggedInDropdown")

它将替换模板，但仍使用原始模板中的助手和事件。