Який найкращий спосіб приховати екран, поки будуються прив’язки js з нокаутом?

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

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

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

Є кілька стратегій, які ви можете використовувати тут.

-Одним є розміщення всього вашого фактичного вмісту в шаблонах, які містяться в тегах скриптів (добре працює з рідними шаблонами). Потім у шаблоні можна використовувати прив’язки керування-потоком. Це буде приблизно так:

<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після накладання прив’язок.

Я просто шукав у Google, і, використовуючи спостережуваний спосіб, я подумав про інший підхід:

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

Вам не потрібно спостережуване, видиме завжди оцінить як істинне, як тільки прив'язка даних буде виконана.

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

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

Я не тестував його на всіх віджетах Kendo, але, схоже, це працює для більшості.

Ось альтернативний підхід, який використовує класи для "приховати та показати" замість вбудованого стилю. Додайте клас "приховати" до елемента, який потрібно приховувати до завантаження вмісту, та додайте прив'язку даних "css", щоб зробити це відображатиметься, коли він зв’язаний.

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

</div>

Класи "сховати" та "показати" вже визначені в Bootstrap.

Якщо Bootstrap не використовується, CSS можна визначити як:

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

Порядок має значення. Клас "приховати" слід визначити перед "show".