Perfect Scrollbar with Knockout Binding

Question

Can anyone please help me with knockout binding handler for perfect scrollbar jquery

here is the viewmodel

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"
    }
]);}

here is the code

<div class="jobListContent" id="create-task-animate-trigger" data-bind="foreach: JobItems, perfectScrollbar: { }">
    <div class="jobListContentItems" data-bind="click: jobListContentItemsClick, css: isActive">
        <div class="status">
            <span data-bind="if: JobStatus() == 'New'">
            <!--<img src="" alt="New Job" />-->
            </span>
            <span data-bind="if: JobStatus() == 'In Progress'">
                <img src="images/jobcards/progress_status.png" alt="In Progress" />
            </span>
            <span data-bind="if: JobStatus() == 'Completed'">
                <img src="images/jobcards/completed.png" alt="Completed" />
            </span>
            <span data-bind="if: JobStatus() == 'Closed'">
                <img src="images/jobcards/closed.png" alt="Closed" />
            </span>
        </div>
        <div class="registration" data-bind="text: Registration"></div>
        <div class="licence" data-bind="text: LicencePlate"></div>
        <div class="delivery" data-bind="text: DeliveryDate"></div>
        <div class="information" data-bind="text: AdditionalInformation"></div>
    </div>
</div>

here is the knockout binding handler it showing the scrollbar on mouse over but its not working

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');
    }
};

Answer 1

Try registering an event handler inside init:

init: function (element, valueAccessor, allBindingsAccessor) {
    ...trimmed...

    //handle the mouse over event, change to fit
    ko.utils.registerEventHandler(element, "mouseenter", function () {
      $(element).perfectScrollbar('update');
    });