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

Question

我正在构建一个网站，我希望使用 CSS 媒体查询来表现 responsively。 我还在使用 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 标记，例如一些元素会以较小的尺寸消失。