Каков наилучший способ скрыть экран при построении привязки jockout js?

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

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

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

Ответ 1

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

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

<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 после того, как привязки были применены.

Ответ 2

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

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

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

Ответ 3

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

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

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