Knockout JS Custom Bindings

Here are a few examples of custom bindings with knockout js.

Learn more »

Slider Transition

Inbuilt Visible Binding

Binding Code

data-bind="visible: isVisibleBindingOpen"
ko.transition.slide.js

Basic Custom Slide Binding

Binding Code

data-bind="slideTransition: isBasicSliderOpen"
ko.transition.slide.js

Advanced Custom Slide Binding

Binding Code

data-bind="slideTransition: { 
              visible: isAdvancedSliderOpen, 
              options: { 
                duration: 1000
              } 
            }"
ko.transition.slide.js

Fade Transition


Tab 1

data-bind="fadeTransition: { 
              visible: currentTab() == 1, 
              options: { 
                duration: 300 
              }
            }"
ko.transition.fade.js

Tab 2

data-bind="fadeTransition: { 
              visible: currentTab() == 2, 
              options: { 
                duration: 300 
              }
            }"
ko.transition.fade.js

Tab 3

data-bind="fadeTransition: { 
              visible: currentTab() == 3, 
              options: { 
                duration: 300 
              }
            }"
ko.transition.fade.js

String Formatter

data-bind="text: rawDate"

data-bind="dateFormatter: rawDate"

ko.formatter.date.js