title: Perfect Scrollbar with Knockout Binding
body: <p>Can anyone please help me with knockout binding handler for perfect scrollbar jquery</p>
  
  <p>here is the viewmodel</p>
  
  <pre><code>var ViewModel = function () {
  this.JobItems = ko.observableArray([
      {
          JobStatus : "New",
          Registration : "123",
          LicencePlate : "234",
          DeliveryDate : "08/01/2014",
          AdditionalInformation : "aasdfa"
      },
      {
          JobStatus : "In Progress",
          Registration : "234",
          LicencePlate : "456",
          DeliveryDate : "04/07/2014",
          AdditionalInformation : "aasdfa"
      },
      {
          JobStatus : "Closed",
          Registration : "abc",
          LicencePlate : "xyz",
          DeliveryDate : "08/01/2014",
          AdditionalInformation : "aasdfa"
      }
  ]);}
  </code></pre>
  
  <p>here is the code </p>
  
  <pre><code>&lt;div class="jobListContent" id="create-task-animate-trigger" data-bind="foreach: JobItems, perfectScrollbar: { }"&gt;
      &lt;div class="jobListContentItems" data-bind="click: jobListContentItemsClick, css: isActive"&gt;
          &lt;div class="status"&gt;
              &lt;span data-bind="if: JobStatus() == 'New'"&gt;
              &lt;!--&lt;img src="" alt="New Job" /&gt;--&gt;
              &lt;/span&gt;
              &lt;span data-bind="if: JobStatus() == 'In Progress'"&gt;
                  &lt;img src="images/jobcards/progress_status.png" alt="In Progress" /&gt;
              &lt;/span&gt;
              &lt;span data-bind="if: JobStatus() == 'Completed'"&gt;
                  &lt;img src="images/jobcards/completed.png" alt="Completed" /&gt;
              &lt;/span&gt;
              &lt;span data-bind="if: JobStatus() == 'Closed'"&gt;
                  &lt;img src="images/jobcards/closed.png" alt="Closed" /&gt;
              &lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="registration" data-bind="text: Registration"&gt;&lt;/div&gt;
          &lt;div class="licence" data-bind="text: LicencePlate"&gt;&lt;/div&gt;
          &lt;div class="delivery" data-bind="text: DeliveryDate"&gt;&lt;/div&gt;
          &lt;div class="information" data-bind="text: AdditionalInformation"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>here is the knockout binding handler it showing the scrollbar on mouse over but its not working </p>
  
  <pre><code>ko.bindingHandlers.perfectScrollbar = {
      init: function (element, valueAccessor, allBindingsAccessor) {
  
          var options = valueAccessor() || {};
          $(element).perfectScrollbar(options);
  
          ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
              $(element).perfectScrollbar("destroy");
          });
      },
      update: function(element, valueAccessor, allBindingsAccessor) {
  
          $(element).perfectScrollbar('update');
      }
  };
  </code></pre>