Wie würde man knockout-js templates css media query bewusst machen?

Question

Ich baue eine Website, die ich responsively mit CSS Media Queries verhalten würde. Ich verwende auch Knockout-js, um meine UI auf dem Client zu erstellen - es ist wirklich schnell schön zu verwenden.

Was ich entdecke, ist, dass ich zum Beispiel einige UI rendern muss, die ich in einer knockout-js Vorlage definiere ... dies führt zu einigen DIVs und SPANs, die Text für jedes 'Listenelement' darstellen.
Wenn der Benutzer den Bildschirm verkleinert, reagiert das Layout über Media Queries, um die Benutzeroberfläche zu "vereinfachen" - das Löschen detaillierterer Informationen, um Platz für die wichtigsten Dinge zu schaffen.

Ich weiß, dass ich nur css verwenden konnte, um meine Labels in "Ausführlichkeitsstufen" zu gruppieren, und dann Medienabfragen verwenden, um die "höheren Ausführlichkeitsstufen" abzuschalten, wenn die Bildschirmgröße reduziert wird würde effektiv bestimmte HTML-Elemente unsichtbar machen.

Wie auch immer - meine Vorlagen werden sehr kompliziert, sehr schnell - weil es einfach nicht ausreicht, ein div auszuschalten. Es scheint mir, dass es mehr Sinn machen würde, dass ich eine Vorlage definieren könnte, die eine css-media-Abfrage 'Regel' enthalten würde, so wie der Benutzer die Browsergröße änderte, waren die Vorlagen tatsächlich getauscht. Dies würde zu saubereren HTML-Vorlagen und weniger komplizierten CSS führen.

Also meine Frage ist - hat jemand dieses Problem in Betracht gezogen, vielleicht durch einige Best Practice gelöst - vielleicht fehlen mir einige Funktionen in KnockoutJs, die sich darum kümmern würden für mich?

Danke SO!

Answer 1

Im besten Fall denke ich, dass der Weg hier wäre, ein Auge auf $ (window) .resize (wenn Sie jQuery verwenden) und überprüfen Sie die Abmessungen der Seite beim ersten Laden und einige Basis setzen beobachtbar, dass Sie die Antwortmodus sagt sollten Sie in sein

Etwas wie:.

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

Dann können Sie beobachten auf dieser Basis berechnete Observablen schaffen basiert, die geeignete Maßnahmen auf der Grundlage der Layout-Typ nehmen.

Sie können auch nach einigen CSS-Markern suchen, z. ein Element, das in kleineren Größen verschwinden wird.