javascript - 加载时 KO 5 秒延迟破坏了我的 UI

Question

我正在制作一个网站，并且使用 KO JavaScript 在用户未登录时显示登录和注册，在用户登录时显示注销。所有功能都运行良好，但我的问题是页面加载时它会显示所有内容 5 秒，直到整个页面正确加载，然后触发并插入正确的语句。这看起来不太好，我真的希望它立即执行，因为它会影响我的 UI。有人帮忙吗？

这是我的代码。

                <!--ko ifnot: Logged()-->
                   <a href="logged" class="ShowLogged">Log in</a>
                <!--/ko-->

                <!-- ko ifnot:Logged()-->
                   <a href="register" class="ShowRegister"> Register</a>
                <!--/ko-->

                <!-- ko if: Logged() -->
                   <a href="#" class="ShowLog" data-bind="click: Logged.Loggedout"> Log Out</a>
                <!--/ko-->

Answer 1

您可以使用template绑定(bind)以渲染该部分:

<!-- ko template: { name: 'logged-links'} -->
<!-- /ko -->

<script id="logged-links" type="text/html">
    <!--ko ifnot: Logged()-->
        <a href="logged" class="ShowLogged">Log in</a>
        <a href="register" class="ShowRegister"> Register</a>
    <!--/ko-->

    <!-- ko if: Logged() -->
        <a href="#" class="ShowLog" data-bind="click: Logged.Loggedout">
            Log Out
        </a>
    <!--/ko-->
</script>

在浏览器渲染元素的时间和ko.applyBindings之间被称为(在你的情况下为 5 秒)，<!-- ko -->绑定(bind)将被忽略，您的链接将被视为普通的 html 标记。

将这些链接放入<script>标签，浏览器不会渲染它们，但 knockout 会执行一次 ko.applyBindings被调用。