Как можно было бы сделать шаблоны knockout-js css медиа-запрос осведомленными? - PullRequest
Новая
       5

Как можно было бы сделать шаблоны knockout-js css медиа-запрос осведомленными?

3 голосов
/ 28 марта 2012

Я создаю веб-сайт, который я хотел бы вести отзывчиво , используя CSS Media Queries.Я также использую Knockout-js для шаблонирования моего пользовательского интерфейса на клиенте - это очень удобно для использования.

Я обнаружил, что мне нужно, например, визуализировать некоторый пользовательский интерфейс, который я определяю вшаблон knockout-js ... это приводит к некоторым DIV и SPAN, которые отображают текст для каждого «элемента списка».
Когда пользователь сжимает экран вниз, макет отвечает через Media Queries, чтобы «упростить» пользовательский интерфейс -опуская более подробную информацию, чтобы освободить место для самых важных вещей.

Я знаю, что я мог бы просто использовать css, чтобы «сгруппировать» свои метки в «уровни многословия», а затем использовать медиазапросы, чтобы отключить «более высокий уровень детализации », так как пространство экрана уменьшается - это фактически сделает некоторые элементы HTML невидимыми.

Однако - мои шаблоны становятся очень сложными, очень быстрыми - потому что простого отключения div может быть недостаточно,Мне кажется, что было бы более разумно, если бы я мог определить шаблон, который будет включать css-media-query 'rule', так что, когда пользователь изменил размер браузера, шаблоны были на самом деле заменен .Это привело бы к более чистым HTML-шаблонам и менее сложному CSS.

Итак, мой вопрос - кто-нибудь рассматривал эту проблему, возможно, решил ее с помощью некоторого передового опыта - возможно, мне не хватает некоторых функций в KnockoutJs, которыепозаботится об этом для меня?

Спасибо, ТАК!

1 Ответ

5 голосов
/ 28 марта 2012

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

Что-то вроде: 

var layoutType = ko.observable('normal');

$(window).resize(function() {
  if ($(window).width() > 900)
    layoutType('normal')
  else if ($(window).width() > 500)
    layoutType('compact')
  else
    layoutType('compressed')
});

$(document).ready(function() {
  $(window).resize()
})

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

Вы также можете наблюдать за некоторым маркером CSS, например за элементом, который исчезнет в меньших размерах.

...