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





несколько полей (4)


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

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

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

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




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

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

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




Все ответы используют пользовательский агент для обнаружения браузера, но обнаружение устройства на основе пользовательского агента - не очень хорошее решение, лучше обнаруживать такие функции, как сенсорное устройство (в новом jQuery, который они удаляют $.browserи используют $.supportвместо этого).

Чтобы обнаружить мобильный телефон, вы можете проверить события касания:

function is_touch_device() {
  return 'ontouchstart' in window // works on most browsers 
      || 'onmsgesturechange' in window; // works on ie10
}

Взято с того, что является лучшим способом обнаружения устройства «сенсорного экрана» с использованием JavaScript?





javascript mvvm knockout.js