Question

I have wanted to try to use knockout.js but have not really needed it. I however am building a new screen and wondering if it is worth trying to do in knockout.js over say jquery.

This is the Google calendar repeat appointment screen. Now what I am trying to do is pretty similar their maybe checkboxes, dropdownlists and radio buttons.

Each choice will affect the summary part. So if I uncheck “F” then the summary should update.

Will knockout make it easier for me to build the summary part? Or is their something else that can help me out?

Answer 1

This is something you could do with Knockout.js. KO isn’t supposed to necessarily be a replacement for jQuery, but a higher level layer to help with model and view bindings (i.e. VMMV). jQuery is still great for animations, and most importantly, AJAX calls. Depending on what you’re doing, KO and jQuery can get along very nicely.

KO can be hard to get your head around, but once you do, it’s pretty awesome, and makes certain things dead simple. For example, I tackled just the section where you click on the day of the week and display it:

http://codepen.io/CWSpear/pen/IbkvJ

If nothing’s checked, nothing shows, but as soon as you start checking stuff, it shows what days are checked, (i.e. Weekly on Thursday).

The JavaScript is only a couple of lines. The magic is the bindings:

Each input has a data-bind="checked: days" attribute, which means when they are checked, they will automagically get added to the days variable in my ViewModel, which is a ko.observeableArray. That means it’s watching those checkboxes, and as soon as there is a change, it will notify anything that depends on it.

Which, as it turns out, our summary variable, which is a ko.computable (which is a computable observable). It has an attribute: data-bind="text: summary, visible: days().length > 0". This means it is only visible if days is nonempty, and the text is defined in our javascript as “Weekly on [list of days]”