Knockout.js animation and Oracle JET 2.1.0 animation

August 21, 2016    Oracle JET 2.1.0 Knockout.js Blog Post

Including animation in your Oracle JET application adds a nice touch to the overall user experience. Of course, javascript has several libraries that can help with animation, but here we will take a look at working with Knockout.js and Oracle JET.


Requirements

Recently, I was creating a form that needed to include a series of fields that should only be visible in certain situations. My project was creating an online check-out form. I wanted users to have the ability to select and alternate address for shipping and have the additional fields become visible when the "Use different Address" checkbox was selected.

Knockout.js - Animation with Oracle JET

When I originally started working on this project, Oracle JET 2.1.0 was not released. But with the release of 2.1.0, I noticed a section of the cookbook included examples of how to enable visual effects with Oracle JET input components.

So, let's take a look at my initial implementation using a custom Knockout.js binding, then we will see how to implement the same funcitonality with Oracle JET using the animation effects.

Knockout.js - Custom binding

Using a custom binding makes it possible to add "custom" capabilties to your application. The Knockout.js documentation provides examples, code snippets and a clear explanation of custom bindings (Knockout.js - Custom Bindings)

Javascript

// Here's a custom Knockout binding that makes elements shown and hide via jQuery's fadeIn()/fadeOut() methods
ko.bindingHandlers.fadeVisible = {
  init: function (element, valueAccessor) {
    var value = valueAccessor();
    $(element).toggle(ko.unwrap(value));
  },
  update: function (element, valueAccessor) {
    var value = valueAccessor();
    ko.unwrap(value) ? $(element).fadeIn() : $(element).fadeOut();
  }
};

HTML

 <div class="oj-flex">
     <label>
        <input type='checkbox' data-bind='checked: displayAdvancedOptions' />
      Use different Address
    </label>
</div>

Basically, define the init and udpate functions for your custom binding, give the binding a name and then reference the binding in your HTML. Below is a simple example using CodePen.

Oracle JET 2.1.0 - Animation Effects

In the documentation there is a section for Adding Animation Effects that covers how apply different effects to JET components. This includes not only adding effects but also specifying onptions for the effect, like the direction, delay .etc.

Custom binding using Knockout.js

See the Pen Oracle JET - Knockout.js animation (simple example)


blog comments powered by Disqus