Question

我正在使用淘汰赛和Sammy为我的路由和导航建立一个SPA。我试图在使用MVVM模型时保持清晰，因为我希望所有操作都绑定到我的VM中。

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

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

我是否愚蠢地试图越过Knockout / Bootstrap流？是否有一种干净的方式可以通过敲除绑定挂钩到Bootstrap生态系统中？

由于

塔尔

Answer 1

我觉得这不是你应该在viewmodel中做的事情。 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
    }
});

基本上它的作用是挂钩resize事件以利用实现Modernizr的mediaquery检查的帮助函数来更新observable。

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

1 个答案: