Каков наилучший способ скрыть экран во время создания нокаутирующих js-привязок?

Question

Я большой фанат нокаутов.Я использую это для всех своих веб-разработок и просто люблю это.Однако я не смог понять, как скрыть пользовательский интерфейс во время создания привязок knockoutjs.

Например, у меня очень надежный пользовательский интерфейс с множеством шаблонов, используемых намоя страница.Проблема, которую я замечаю, состоит в том, что когда пользователь впервые посещает страницу, он видит все мои шаблоны за доли секунды до того, как привязки включаются и скрывают их.

Каков наилучший способ исправить этопроблема?Я пытался использовать вспомогательные классы, чтобы скрыть их, но тогда шаблоны не могут отображаться с использованием привязок visible и if, если я не удалю ссылку на вспомогательный класс (т.е. ui-helper-hidden).

Answer 1

Я просто гуглял по этому поводу, и после использования наблюдаемого способа я подумал о другом подходе:

<div style="display: none" data-bind="visible: true">
  <ul data-bind="foreach: items">
    <li data-bind="text: name"></li>
  </ul>
</div>

Вам не нужно наблюдаемое, видимое всегда будет оценивать как истинное, как только данныепереплет завершен.

Answer 2

Есть несколько стратегий, которые вы можете использовать здесь.

-Одно состоит в том, чтобы поместить весь ваш фактический контент в шаблоны, которые живут в тегах скрипта (отлично работает с собственными шаблонами). Внутри шаблона вы можете использовать привязки потока управления. Это было бы как:

<div data-bind="template: 'contentTmpl'"></div>

<script id="contentTmpl" type="text/html">
   <ul data-bind="foreach: items">
       <li data-bind="text: name"></li>
   </ul>
</script>

-Другой выбор - использовать style="display: none" на элементе контейнера вместе с привязкой visible, которую можно привязать к наблюдаемой loaded, где вы изменяете наблюдаемое на true после применения привязок.

Answer 3

Здесь представлен альтернативный подход, использующий классы «скрыть и« показать »вместо встроенного стиля. Добавить класс« скрыть »к элементу, который необходимо скрыть до загрузки содержимого, и добавить привязку данных« css » чтобы было показано, когда он связан.

<div class="hide" data-bind="css: {'show': true}">

</div>

Классы 'hide' и 'show' уже определены в Bootstrap.

Если Bootstrap не используется, CSS может быть определен как:

.hide {
  display: none !important;
}
.show {
  display: block !important;
} 

Порядок имеет значение. Класс «hide» должен быть определен перед «show».

Answer 4

Вот метод только для CSS, если вы беспокоитесь о неустановленных виджетах, появляющихся перед привязкой для реализаций MVVM .

[data-role]:not([role], [tabindex]) {
    visibility: hidden;
}

Я не тестировал его на всех Kendoвиджеты, но, похоже, работает для большинства.