CODEWITHSUNDEEP
jqueryknockout.js
chobo2
chobo2

Reputation: 85775

Is Knockout.js right for type of screen?

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.

enter image description here

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?

Upvotes: 0

Views: 124

Answers (2)

CWSpear
CWSpear

Reputation: 3270

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]"

Upvotes: 1

billmag
billmag

Reputation: 348

I've been using Knockout for about 18 months now on a variety of different projects. In my experience, Knockout is extremely useful for tying behavior to form state and then eventually dumping those forms back to your server.

In my opinion, the big downsides to Knockout are:

  • Client performance issues as your pages/view models get bigger.
  • Lack of built-in support for the network/AJAX layer in your client.
  • It takes a bit of setup/learning and has a not-small footprint in your JS assets.

For this use case, you aren't especially vulnerable to the first two. You might be for the third, but if you're already using Knockout elsewhere, I'd say go for it.

Upvotes: 0

Related Questions