{{#if currentUser}} 当用户注销时仍然呈现里面的图标

Question

感谢您阅读我的消息，这是我的问题：

我正在使用 Bulma 制作的导航栏，其中我使用 {{#if currentUser}} 显示 login/register 按钮或来自 FontAwesome 的个人资料图片图标，如下所示（"S'inscrire" 和"Se connecter" 表示在法语中注册并登录）：

<div class="navbar-end">
    <div class="navbar-item">
        <div class="buttons">
            {{#if currentUser}}
                <!-- Displayed only when the user is logged in-->
                <i class="fas fa-user icon is-large" id="userProfile"></i>
            {{else}}
                <!-- Displayed when the user is NOT logged in-->
                <a class="button is-primary register">
                    <strong>S'inscrire</strong>
                </a>
                <a class="button is-light login">Se connecter</a>
            {{/if}}
        </div>
    </div>
</div>

当用户未登录时，它只显示按钮：

当他登录时我只有图标 :

我的问题是，当用户注销时，我同时看到用户图标和按钮 :

如果我多次登录和注销，我会得到多个图标。看起来这是 FontAwesome 图标的问题，我已经尝试使用普通图像而不是图标并且它表现正常，但我需要在我的应用程序的某些地方使用此类声明中的图标。

提前致谢！

Answer 1

这是因为 font awesome 5 用 svg 替换了 <i> 标签，如果它没有包含在另一个流元素中，这将破坏您的代码反应性。尝试用 <span> 包装 <i> 以保持反应性：

<span>
  <i class="fas fa-user icon is-large" id="userProfile"></i>
</span>

您也可以将其设为简短的无状态模板：

<template name="icon">
  <span>
    <i class="fas fa-{{name}} {{#if large}}is-large{{/if}}" id="{{id}}"></i>
  </span>
</template>

并这样称呼它

{{>icon name="user" large=true id="userProfile"}}

{{#if currentUser}} 当用户注销时仍然呈现里面的图标

{{#if currentUser}} with icon inside still rendered when user logs out

meteor

font-awesome

meteor-blaze

font-awesome-5