如何使用 Knockout JS 在 Bootstrap 中利用 @media 事件

Question

我正在使用 Knockout 和 Sammy 构建一个 SPA，用于路由和导航。我试图在使用 MVVM 模型时保持非常清楚，因为我希望所有操作都绑定到我的 VM 中。

我正在尝试弄清楚如何在该模式中使用 Bootstrap 响应式导航栏。我知道如何使 Bootstrap 导航与切换按钮和导航栏折叠一起工作，但我觉得为了对称，我应该在我的虚拟机中这样做。

唯一的问题是我不确定如何对引导程序用来切换导航栏切换按钮和导航折叠部分的媒体查询进行数据绑定。

我试图跨越 Knockout/Bootstrap 流是愚蠢的吗？有没有一种干净的方法可以通过淘汰绑定绑定到 Bootstrap 生态系统？

谢谢

塔尔

Answer 1

我觉得这不是你应该在视图模型中做的事情。 Bootstrap 的导航栏更改是基于 CSS 的，老实说，这很好。但是，当您希望 UI 的行为以 Bootstrap 无法处理的方式发生变化时，绑定媒体查询可能仍然有用。我就是这样做的：（使用 Modernizr）

var mediaQueries = {
        xs: 'only screen and (max-width: 767px)',
        smAndUp: 'only screen and (min-width: 768px)'
        // Match these queries to Bootstrap's
    },
    matchMediaQuery = function (mediaQuery) {
        return window.Modernizr.mq(mediaQuery);
    },
    mediaXs = function () {
        return matchMediaQuery(mediaQueries.xs);
    },
    mediaXsObservable = ko.observable(mediaXs());
$(window).on('resize', function () {
    var xsNow = mediaXs(),
        xsPrevious = mediaXsObservable();
    if (xsNow !== xsPrevious) {
        mediaXsObservable(xsNow); // subscribe to this observable and respond accordingly
    }
});

基本上，它的作用是使用实现 Modernizr 的媒体查询检查的帮助函数挂钩调整大小事件以更新可观察对象。