javascript - 如何使 knockout-js 模板 css 媒体查询感知？

Question

我正在建立一个我想表现的网站 responsively使用 CSS 媒体查询。 我还使用 Knockout-js 在客户端上制作我的 UI 模板——它真的很快就很好用。

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

我知道我可以使用 css 将我的标签“分组”为“冗长级别”，然后在屏幕空间减少时使用媒体查询关闭“更高级别的冗长”——这会有效地使某些 HTML 元素不可见。

但是 - 我的模板变得非常复杂，非常快 - 因为仅仅关闭一个 div 可能还不够。在我看来，我可以定义一个模板更有意义，该模板将包含 css-media-query“规则”，因此当用户更改浏览器大小时，模板是实际上交换了。这将导致更简洁的 HTML 模板和更简单的 CSS。

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

非常感谢!

Answer 1

充其量，我认为去这里的方法是密切关注 $(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 标记，例如一些元素会以较小的尺寸消失。