Question

我正在创建一个网站，如果用户未登录，我正在使用KO JavaScript显示登录和注册。如果用户已登录，则使用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秒），绑定将被忽略，您的链接将被视为正常的html标记。

通过将这些链接放在<script>标记中，浏览器不会渲染它们，但是一旦调用ko.applyBindings就会执行淘汰。

Answer 2

我会尝试将knockout.js放在标题中，所以它会在每次渲染之前加载。

这应该在整个页面加载后不加载时执行逻辑。

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

2 个答案: