Jonas Stawski

KnockoutJS allows you to “simplify dynamic JavaScript UIs by applying the Model-View-View Model (MVVM) pattern.” If you haven’t heard of KnockoutJS or don’t know how to use it, I highly recommend you go learn it now.

KnockoutJS has many built in bindings, such as the value, visible, html, css, etc and it is also powerful enough to allow you to create your own custom bindings. The custom bindings options is very important to understand as it can help you interact with other libraries such as jQuery.UI.

The visible binding, as the name implies, allows you to show or hide an HTML element based on some condition or property on your ViewModel. It is very straight forward, but it lacks one huge feature, animating the transition between states, which makes for a much nicer user experience.

So, how do we animate the transition? There are two ways: overriding the functionality or creating a custom binding.

You should definitely try to create your own custom binding and the KnockoutJS documentation on Custom Bindings uses the slideVisible example to accomplish just this. If you are starting from scratch or can afford refactoring your code I highly recommend doing this. On the other hand, if you have already wrote most of the code and can’t afford refactoring, you can override the functionality by creating a custom binding named visible. This will basically override the functionality of the native binding.

We can get an idea of how to override it by looking into the KnockoutJS source code and use it as our base:

   1:  ko.bindingHandlers.visible = {

   2:    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {

   3:      var value = ko.utils.unwrapObservable(valueAccessor());

   4:                  

   5:      var $element = $(element);

   6:                  

   7:      if (value) 

   8:        $element.show();

   9:      else

  10:        $element.hide();

  11:    },

  12:    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {

  13:      var value = ko.utils.unwrapObservable(valueAccessor());

  14:                 

  15:      var $element = $(element);

  16:   

  17:                  

  18:      var allBindings = allBindingsAccessor();

  19:                  

  20:      // Grab data from binding property

  21:      var duration = allBindings.duration || 500; 

  22:      var isCurrentlyVisible = !(element.style.display == "none");

  23:                  

  24:      if (value && !isCurrentlyVisible)

  25:        $element.show(duration);

  26:      else if ((!value) && isCurrentlyVisible)

  27:        $element.hide(duration);

  28:    }

  29:  };

The init function will hide or show the element right away without animation, but when the value of our ViewModel property changes the update function will be called, hiding or showing the element using jQuery. Furthermore, you can override the duration of the animation by passing in through the duration parameter. If you don’t supply one 500 will be used.

Here’s how to use the new visible binding:

   1:  <div data-bind="visible: shouldShowMessage">

   2:    Some Message

   3:  </div>

Alternatively, you can pass in a duration:

   1:  <div data-bind="visible:shouldShowMessage, duration: 5000">

   2:    A very slow message

   3:  </div>

The only thing you need to make sure is that the definition of the new visible handler is added after the KnockoutJS library.

Happy Programming!