twitter-bootstrap - ノックアウト条件バインディング

Question

わかりました、私はSPAアプリケーションを構築しており、サイトが電話またはラップトップで表示されるかどうかに応じて異なるレイアウトを探しています。

Bootstrap を使用すると、css クラスの条件付きの非表示/表示が提供されます。これは、それが行うことにはうまく機能しますが、レイアウトが特定のポイントを超えて変更されるとうまく機能しません。この代替レイアウトでは、1 つのページに 2 セットの 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");
        }
    }
};

これまでのところ、Knockout を使用してページで何が起こっているかを観察した場合を除き、ノックアウト タグの 2 番目のセットはまだバインドされています。ko 条件を追加して、表示しようとしているコントロールにのみバインドしようとしました。

<div id="content" class="main">
    <div class="row landscape">
        <!--ko if: $(window.innerWidth > 899) -->
        <div class="col-8 col-lg-8">
            <!--ko compose: {view: 'positions/list'} --><!--/ko-->
        </div>
        <div class="col-lg-4 col-4 " > 
            <!--ko compose: {view: 'shared/summaryGraph'} --><!--/ko-->
            <!--ko compose: {view: 'shared/memberSummary'} --><!--/ko-->
            <!--ko compose: {view: 'shared/memberCalendar'} --><!--/ko-->
            <!--ko compose: {view: 'shared/memberTwitter'} --><!--/ko-->
            <div data-bind="visible: advert() != null && advert().length > 0" id="advert"  class="img-rounded container-fluid" style="min-width: 120px; min-height: 680px; height: inherit; margin-bottom: 30px; background-color:whitesmoke ">
                <h4>Advert</h4>
            </div>
        </div>
    <!--/ko-->
    </div>
    <div  class="row phonescape" style="padding-left: 15px; padding-top: 15px;">
    <!--ko if: $(window.innerWidth <= 899) -->
        <div class="col-sm-12">
            <!--ko compose: {view: 'shared/memberSummary'} --><!--/ko-->
            <!--ko compose: {view: 'shared/sagaSummaryGraph'} --><!--/ko-->
            <!--ko compose: {view: 'positions/list'} --><!--/ko--> 
        </div>
    <!--/ko-->
    </div>
</div>

しかし、デバッグ情報を観察すると、["Binding", "views/positions/list", ko.bindingContext] ["Binding", "views/positions/list", 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」モードまたは「landscape」モードのいずれかにのみバインドし、確実にパフォーマンスに影響するものを削除することです。これを行う方法はありますか？