2014-05-13 3 views
2

Может кто-нибудь, пожалуйста, помогите мне с нокаута связывании обработчика для идеальной прокрутки JQueryСовершенная Scrollbar с Нокаут Binding

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

здесь код

<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> 

здесь является обработчик привязки нокаута, показывающий полосу прокрутки на мыши, но не работает

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

'JobStatus' не является функцией, но вы все еще ссылающегося на него. Зачем? – haim770

+0

@ haim770 извините, за путаницу. В реальной модели представления JobStatus является наблюдаемым, значение которого задается в зависимости от идентификатора состояния. – Haridarshan

ответ

4

Try регистрации обработчика событий в INIT:

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

    //handle the mouse over event, change to fit 
    ko.utils.registerEventHandler(element, "mouseenter", function() { 
     $(element).perfectScrollbar('update'); 
    }); 
Смежные вопросы