CODEWITHSUNDEEP
javascriptknockout.js
Pete Tong
Pete Tong

Reputation: 51

KO 5 second delay runining my UI when loading

I am making a website and i am using KO JavaScript to show Log In and Register if the user is not logged in or Log out if the user is logged in. All the functionality works perfectly but my issue is when the page loads it shows all of them for a split 5 second until the entire page has loaded properly, then it triggers and inserts the correct statement. This does not look nice and i really want it to execute straight away, as its effect my UI. Anyone help?

Here is my code.

                <!--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-->

Upvotes: 1

Views: 64

Answers (2)

manji
manji

Reputation: 47968

You can use template binding to render that part:

<!-- 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>

Between the time elements are rendered by the browser and ko.applyBindings is called (5 sec in your case), <!-- ko --> bindings are ignored and your links are treated as normal html markup.

By putting those links in a <script> tag, the browser will not render them but knockout will do once ko.applyBindings is called.

Upvotes: 1

Romeo
Romeo

Reputation: 531

I would try to put knockout.js in header, so it loads before every rendering.

This should execute the logic as soon as it loads not after the whole page loads.

Upvotes: 0

Related Questions