Twitter bootstrap 剔除条件绑定

好的，我一直在构建一个SPA应用程序，并希望根据该站点是在手机上还是在笔记本电脑上查看而有不同的布局

如果使用Bootstrap，它提供了css类的条件隐藏/显示，虽然这很好地实现了它的功能，但当布局更改超过某一点时，它就不起作用了。使用这种替代布局，我最终需要在一个页面上放置两组div，然后使用一些有条件的Javascript代码删除目标div的内部html。这可以防止图表填充到页面中永远看不到的部分

    var setViewscape = function () {
    var l = $(".positionDetails").length;
    if (l == 0) {
        setTimeout(function() {
            setViewscape();
        }, 10);
    } else {
        if (window.innerWidth <= 899) {
            $(".landscape").html("");
            $(".phonescape").css("visibility", "visible");
        } else {
            $(".phonescape").html("");
            $(".landscape").css("visibility", "visible");
        }
    }
};

var setViewscape=函数（）{
变量l=$（“.positionDetails”）.length；
如果（l==0）{
setTimeout（函数（）{
setViewscape（）；
}, 10);
}否则{
如果（window.innerWidth
注意

但是当我观察调试信息时，我看到 [“绑定”，“视图/位置/列表”，ko.bindingContext] [“绑定”，“视图/位置/列表”，ko.bindingContext]

[“Binding”，“views/shared/memberSummary”，ko.bindingContext] [“Binding”，“views/shared/memberSummary”，ko.bindingContext]

[“Binding”，“views/shared/summaryGraph”，ko.bindingContext] [“Binding”，“views/shared/summaryGraph”，ko.bindingContext]

我相信这一定是一个性能的打击

---

我想做的是只绑定到“phonescape”或“横向”模式，并删除一定会影响性能的内容。知道怎么做吗？

最近，我使用了一个可观察扩展来做类似的事情，该扩展根据媒体查询是否被点击来更新可观察内容。您可以定义一个o可观察的，如：

this.large = ko.observable().matchMedia("(min-width: 800px)");

然后，您可以将页面的区域与“大”绑定（如

if:large

），以防止绑定您不想要的区域

这段代码有点幼稚，因为它只支持针对旧浏览器中基于px的测量值的最小/最大宽度查询

以下是我使用的：

//small extension to update an observable based on a media query
(function() {
    var self = ko.observable.fn.matchMedia = function(query) {
        self["matchMedia" in window ? "syncWithMatchMedia" : "syncWithResize"](this, query);
        return this;
    };

    self.syncWithMatchMedia = function(observable, mediaQuery) {
        var query = window.matchMedia(mediaQuery);

        observable(query.matches);

        query.addListener(function(query) {
            observable(query.matches);
        });
    };

    self.syncWithResize = function(observable, mediaQuery) {
        var pieces = mediaQuery.split(":"),
            isMax = pieces[0].indexOf("max") > -1,
            value = pieces[1].replace(")", "").replace("px",""), //just works with px for now
            currentWidth;

        var matcher = function() {
            var width = document.outerWidth || document.body.clientWidth;

            //see if something changed
            if (width !== currentWidth) {
                currentWidth = width;
                observable(isMax ? value > width : value < width);
            }
        }

        matcher();

        ko.utils.registerEventHandler(window, "resize", matcher);
    };
})();

//基于媒体查询更新可观察对象的小扩展
（功能（）{
var self=ko.observable.fn.matchMedia=函数（查询）{
self[“匹配媒体”在窗口中？“syncWithMatchMedia”：“syncWithResize”]（此，查询）；
归还这个；
};
self.syncWithMatchMedia=函数（可观察，mediaQuery）{
var query=window.matchMedia（mediaQuery）；
可观察（查询匹配）；
addListener（函数（查询）{
可观察（查询匹配）；
});
};
self.syncWithResize=函数（可观察，mediaQuery）{
var pieces=mediaQuery.split（“：”），
isMax=个数[0]。indexOf（“max”）>-1，
value=pieces[1]。replace（“），”）。replace（“-px”，”），//目前只适用于px
电流宽度；
var matcher=函数（）{
var width=document.outerWidth | | document.body.clientWidth；
//看看有没有什么变化
如果（宽度！==currentWidth）{
当前宽度=宽度；
可观察（isMax？值>宽度：值<宽度）；
}
}
匹配器（）；
ko.utils.registerEventHandler（窗口，“调整大小”，匹配器）；
};
})();

如果浏览器不支持

matchMedia

API，则返回使用

resize

事件

以下是一个示例：

//small extension to update an observable based on a media query
(function() {
    var self = ko.observable.fn.matchMedia = function(query) {
        self["matchMedia" in window ? "syncWithMatchMedia" : "syncWithResize"](this, query);
        return this;
    };

    self.syncWithMatchMedia = function(observable, mediaQuery) {
        var query = window.matchMedia(mediaQuery);

        observable(query.matches);

        query.addListener(function(query) {
            observable(query.matches);
        });
    };

    self.syncWithResize = function(observable, mediaQuery) {
        var pieces = mediaQuery.split(":"),
            isMax = pieces[0].indexOf("max") > -1,
            value = pieces[1].replace(")", "").replace("px",""), //just works with px for now
            currentWidth;

        var matcher = function() {
            var width = document.outerWidth || document.body.clientWidth;

            //see if something changed
            if (width !== currentWidth) {
                currentWidth = width;
                observable(isMax ? value > width : value < width);
            }
        }

        matcher();

        ko.utils.registerEventHandler(window, "resize", matcher);
    };
})();