Question

上一节介绍的解决方案是一种简单的常规方式来显示通知，但它有一个缺点，即徽章仅在加载新页面时刷新。 如果用户花费很长时间阅读一个页面上的内容而没有点击任何链接，那么在该时间内出现的新消息将不会显示，直到用户最终点击链接并加载新页面。

为了让这个应用程序对我的用户更有用，我希望徽章自行更新未读消息的数量，而用户不必点击链接并加载新页面。 上一节的解决方案的一个问题是，当加载页面时消息计数为非零时，徽章才在页面中渲染。 更方便的是始终在导航栏中包含徽章，并在消息计数为零时将其标记为隐藏。 这样可以很容易地使用 JavaScript 显示徽章：

app/templates/base.html ：使用 JavaScript 渲染的友好未读消息徽章。

                    <li>
                        <a href="{{ url_for('main.messages') }}">
                            {{ _('Messages') }}
                            {% set new_messages = current_user.new_messages() %}
                            <span id="message_count"
                                  style="visibility: {% if new_messages %}visible
                                                     {% else %}hidden {% endif %};">
                                {{ new_messages }}
                            </span>
                        </a>
                    </li>

使用此版本的徽章时，我总是将其包含在内，但当 new_messages 非零时， visibility CSS 属性设置为 visible ；否则设置为 hidden 。 我还为表示徽章的元素添加了一个 id 属性，以便使用 $('#message_count') jQuery 选择器来简化这个元素的选取。

接下来，我编写一个简短的 JavaScript 函数，将该徽章更新为最新的数字：

app/templates/base.html ：导航栏中的动态消息通知徽章

...
{% block scripts %}
    <script>
        // ...
        function set_message_count(n) {
            $('#message_count').text(n);
            $('#message_count').css('visibility', n ? 'visible' : 'hidden');
        }
    </script>
{% endblock %}

这个新的 set_message_count() 函数将设置徽章元素中的消息数量，并调整可见性，以便在计数为 0 时隐藏徽章。