嵌入在导航栏下拉列表中的Meteor accounts-ui下拉行为

Question

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

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核心没有一种简单的方法可以做到这一点，但你可以使用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")

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