Question

I am building a website which I would like to behave responsively using CSS Media Queries.
I am also using Knockout-js to template my UI on the client – it really is quick nice to use.

What I am discovering, is that I need to, for example, render some UI which I define in a knockout-js template… this results in some DIVs and SPANs which render text for each ‘list item’.
When the user shrinks the screen down, the layout responds through Media Queries to ‘simplify’ the user interface – dropping more detailed information to make space for the most important stuff.

I know that I could just use css to ‘group’ my labels into ‘levels of verbosity’, and then use media queries to turn off the ‘higher levels of verbosity’ as the screen real-estate is reduced – this would effectively make certain HTML elements invisible.

However – my templates get very complicated, very quickly – because simply turning off a div may not be enough. It seems to me, that it would make more sense that I could define a template, which would include a css-media-query ‘rule’, so as the user changed the browser size, the templates were actually swapped. This would lead to much cleaner HTML templates, and less complicated CSS.

So, my question is – has anyone considered this problem, perhaps solved it through some best practice – perhaps I’m missing some functionality in KnockoutJs that would take care of this for me?

Thanks SO!

Answer 1

At best, I think the way to go here would be to keep an eye out on $(window).resize (if you’re using jQuery) and check the dimensions of the page on initial load and set some base observable that tells you which responsive mode you should be in.

Something like:

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

Then you can create computed observables based on that base observable that can take appropriate action based on the layout type.

You can also watch for some CSS marker, e.g. some element that will disappear in smaller sizes.