jQuery integration in knockoutjs

Knockoutjs provides a refinement method using the jQuery link method. You can use knockoutjs to set custom binding for this. Suppose I would like to use its jQuery draft in the slideDown and effect the basic show method to show and hide items. Although it can be achieved through the "visible" attribute of gene knockout, but to do it in an elegant way to achieve it.

All you need to do with the ko.bindingHandlers add auxiliary properties that are written in the init and update methods for your custom code. This blog does not explain how to create custom links. You can find it in a qualified document. This is the complete code for custom links using jQuery to show / hide elements.

   ko.bindingHandlers.collapseVisible = {
            
        init: function (element, valueAccessor) {

             var value = valueAccessor();
             $(element).toggle(ko.utils.unwrapObservable(value));
            },            
        update: function (element, valueAccessor, allBindingsAccessor) {

                var value = valueAccessor();
                var allBindings = allBindingsAccessor();
                var duration = allBindings.slideDuration || 500; 

                ko.utils.unwrapObservable(value) ? 
                  $(element).slideDown(duration) : $(element).slideUp(duration);
            }
   };

Now see the initial state of the element in the above code init method. The method is used once for each element DOM call. Gets the use of the element $ (element) and performs the required action for it.

Just change the relevant observable, call the KO update callback method. In this example, use the ko.utils.unwrapObservable element (value) and call the effect of the basic show or method of the value obtained by slideDown.

Now, our next step is how to link the DOM element to the collapseVisible Jumpstart.

 <div data-bind="collapseVisible: displayDetail, slideDuration: 1000" class="second">
         Loading the examples slider
    </div>

So now when the displayDetail observable will be change it will call the Update callback method and according to that value the slideUp and slideDown methods will be called.

Complete solution

Now lets take a complete example to understand this completely

HTML CODE

<div class="first">
    <div class="title">

       <span data-bind="html: title"></span>
       <a class="showButton" href="#" data-bind="html: ButtonText, event: { click: onShow }"></a>
    </div>
    <div data-bind="collapseVisible: displayDetail, slideDuration: 1000" class="second">
          Loading the examples slider
    </div>
</div>

CSS CODE

<style>
    .first
     {
       border: 1px black solid; width: 650px; margin-left: auto; margin-right: auto;
     }

     .first .title
     {
       padding: 8px; background-color: #e1e1e1; border-bottom: 1px black solid;
     }

     .first .title .showButton
     {
       float: right;
     }

     .first .second
     {
       padding: 8px;font-size:12px;
     }
</style>

JS CODE

<script type="text/javascript">
   var vm = {

      title: "Collapsable header",

      ButtonText: ko.observable('Show'),

      displayDetail: ko.observable(false),

      onShow: function () {

          var newVal = !this.displayDetail();
          this.displayDetail(newVal);
          this.ButtonText(newVal ? "Hide" : "Show");
      }
   };

   ko.bindingHandlers.collapseVisible = {
            
        init: function (element, valueAccessor) {

             var value = valueAccessor();
             $(element).toggle(ko.utils.unwrapObservable(value));
            },            
        update: function (element, valueAccessor, allBindingsAccessor) {

                var value = valueAccessor();
                var allBindings = allBindingsAccessor();
                var duration = allBindings.slideDuration || 500; 

                ko.utils.unwrapObservable(value) ? 
                  $(element).slideDown(duration) : $(element).slideUp(duration);
            }
   };
   ko.applyBindings(vm);
</script>

OUTPUT