怎么会让knockout-js模板css媒体查询意识到？

Question

我正在构建一个网站,我希望使用CSS媒体查询响应.我也在使用Knockout-js在客户端上模拟我的UI - 它真的很快就可以使用了.

我发现的是,例如,我需要渲染一些我在knockout-js模板中定义的UI ...这导致一些DIV和SPAN为每个"列表项"呈现文本.
当用户缩小屏幕时,布局会通过媒体查询响应"简化"用户界面 - 删除更详细的信息,为最重要的内容腾出空间.

我知道我可以使用css将我的标签"分组"为"详细级别",然后使用媒体查询来关闭屏幕空间减少时的"更高级别的冗长" - 这将有效地确定HTML元素不可见.

然而 - 我的模板变得非常复杂,非常快 - 因为简单地关闭div可能还不够.在我看来,我可以更有意义地定义一个模板,其中包括一个css-media-query"规则",因此当用户更改浏览器大小时,模板实际上是交换的.这将导致更清晰的HTML模板和更简单的CSS.

所以,我的问题是 - 有没有人考虑过这个问题,或许通过一些最佳实践解决了这个问题 - 也许我在KnockoutJs中缺少一些可以解决这个问题的功能？

谢谢!

Answer 1

充其量,我认为去这里的方法是留意$(window).resize(如果你正在使用jQuery)并在初始加载时检查页面的尺寸并设置一些基本的observable告诉你你应该采用哪种响应模式.

就像是:

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()
})

然后,您可以基于可以根据布局类型采取适当操作的基本observable创建计算的observable.

您还可以观察一些CSS标记,例如某些元素将以较小的尺寸消失.