Сценарий внизу?

Question

Включая сценарий моей модели просмотра в нижней части страницы и проблема. Дело до тех пор, пока не назовется applyBindings (который также находится внизу) пользователь может увидеть не привязанную страницу на секунду, где отображается обнаженный шаблон. Одно из решений - разместить сценарии наверху и обернуть applyBindings в $() или «документ готов». Но я действительно отказываюсь признать, что решить проблему не удастся и сохранить сценарии внизу.

Answer 1

Я всегда использую что-то вроде этого:

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

Answer 2

Вы можете скрыть элементы в вопросе с помощью CSS и отображать их после того, как 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/',''); 
} 

На самом деле код удаляет hide-while-loading класс вместо просто сделать элементов ts видно, так что элементы, которые должны быть скрытыми, оставаться скрытыми.

Answer 3

Вы можете использовать привязку css для переключения видимости несвязанных элементов.

Вероятно, на содержащий элемент, сделать что-то вроде этого:

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

Добавить класс CSS:

.notready { display : none; } 

Затем добавьте новый наблюдаемым в вашей модели представления:

isReady : ko.observable(true) 

Код переключает/удаляет класс notready CSS при isReady оценке tes до true.