knockout-jsテンプレートをCSSのメディアクエリに対応させるにはどうすればよいですか？

Question

私はCSSメディアクエリを使用してresponsivelyを振る舞うしたいウェブサイトを構築しています。 私はKnockout-jsを使ってクライアントのUIをテンプレート化しています。使用するのは素早く素敵です。

私が発見したのは、knockout-jsテンプレートで定義したUIをレンダリングする必要があるということです。これによって、各「リスト項目」のテキストをレンダリングするDIVとSPANが生成されます。最も重要なもののためのスペースを作るために、より詳細な情報を削除する - ユーザーがダウンして、画面を縮小すると
は、レイアウトは、ユーザインタフェースの簡素化」にメディアクエリーによって応答します。

私は「冗長のレベル」にラベルを「グループ化」してから、画面の不動産が減少するにつれてメディアクエリを使用して「より高いレベルの冗長性」をオフにすることができます。効果的に特定のHTML要素を非表示にします。

は、しかし - 私のテンプレートは非常に迅速に、非常に複雑になります - 単純にdiv要素をオフにすることは十分ではない可能性があるため。私は、ユーザーがブラウザのサイズを変更するように、テンプレートが実際にを入れ替えた、 CSSメディアクエリ「ルール」を含まれるテンプレートを定義することができ、より理にかなっていることを、私には思えます。これにより、はるかにクリーンなHTMLテンプレートが得られ、複雑なCSSも少なくなります。

だから、私の質問は - この問題と考え、誰が、おそらくいくつかのベストプラクティスを通してそれを解決した - おそらく私は私のために、このの世話をするだろうKnockoutJsで一部の機能が欠けていますか？

ありがとうございます！

Answer 1

ここに行く方法は、$（window）.resize（jQueryを使用している場合）を見直し、初期ロード時のページのサイズを確認してベースを設定することです観測可能あなたがあるべきである応答モードを示していますそのような

何か：。

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() 
}) 

その後、あなたは、レイアウトの種類に基づいて適切な行動をとることができ、観察そのベースに基づいて計算された観測を作成することができます。

あなたはまた、例えば、いくつかのCSSマーカーを監視することができますより小さなサイズで消える要素。