Что является лучшим способом, чтобы скрыть экран во время привязки нокаут JS и строятся?

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

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

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

3 76
javascript knockout.js mvvm

3 ответа:

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

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

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

70

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

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

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

190

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

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

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

0