Clever Geek Handbook

Script at the bottom?

I am including my view model script at the bottom of the page and have a problem. Until it is called applyBindings

(which is also at the bottom), the user can see a page not tied for a second, where the nude template is displayed. One solution is to place scripts at the top and finalize applyBindings

in, $()

or "finished document". But I really refuse to admit that there is no way to fix the problem and keep the scripts at the bottom.

+3


source to share


3 answers


I always use something like this:



<div data-bind="visible:true" style="display:none">
    ...
</div>
+5


source


You can hide the elements in question with CSS and display them after applyBindings

CSS

.hide-while-loading { display: none }


Js

var elements = document.getElementsByClassName('hide-while-loading ');
for (var i = 0; i < elements.length; ++i) {
    // remove class:
    elements[i].className = elements[i].className.replace('/\bhide-while-loading\b/','');
}

In fact, the code is removing the class hide-while-loading

, not just making the elements visible, so the elements that should be hidden remain hidden.

0


source


You can use css binding to toggle the visibility of unbound elements.

Probably on the containing element, do something like this:

<div data-binding="css: { notready: !isReady()}" class="notready">
  Other children with bindings
</div>

Add CSS class:

.notready { display : none; }

Then add a new observable model of your view:

isReady : ko.observable(true)

The code toggles / removes the notready

CSS class when isReady

evaluating as true

.

0


source






More articles:


All Articles