KO加载时运行UI延迟5秒

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绑定来渲染该部分：

<!-- 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 -->绑定将被忽略，链接将被视为正常的html标记。

通过将这些链接放在<script>标记中，浏览器将不会呈现它们，但一旦调用ko.applyBindings，就会进行敲除。

Answer 2

我会尝试将knockout.js放在头中，这样它会在每次渲染之前加载。

这应该在逻辑加载后立即执行，而不是在整个页面加载后执行。