Knockoutjs bind mouseover или JQuery

Question

У меня этот код в jquery. Как я напишу это в нокауте с привязкой. Или лучше иметь его в jquery. Есть ли умный способ узнать, когда писать в привязке или в jquery? Это больше viewstuff, так что, возможно, это должно быть в JQuery?

$("body").on("mouseover mouseout", '.hoverItem', function() { 
    $(this).toggleClass('k-state-selected'); 
}); 

Answer 1

Если переключение этого класса на самом деле не нужно подключаться к данным в модели представления, то действительно нет оснований, что вы не могли бы делать то, что вы делаете сейчас.

Вот пример того, как сделать это с привязками по умолчанию:

вид:

<ul data-bind="foreach: items"> 
    <li data-bind="text: name, event: { mouseover: toggle, mouseout: toggle }, css: { hover: selected }"></li> 
</ul> 

вид код модели:

var Item = function(name) { 
    this.name = ko.observable(name); 
    this.selected = ko.observable(false); 
    this.toggle = function() { 
     this.selected(!this.selected()); 
    } 
}; 

var viewModel = { 
    items: ko.observableArray([ 
     new Item("one"), 
     new Item("two"), 
     new Item("three") 
    ]) 
}; 

ko.applyBindings(viewModel); 

С пользовательских привязок можно даже уменьшить его до:

<ul data-bind="foreach: items"> 
    <li data-bind="text: name, hoverToggle: 'hover'"></li> 
</ul> 

вид модели:

ko.bindingHandlers.hoverToggle = { 
    update: function(element, valueAccessor) { 
     var css = valueAccessor(); 

     ko.utils.registerEventHandler(element, "mouseover", function() { 
      ko.utils.toggleDomNodeCssClass(element, ko.utils.unwrapObservable(css), true); 
     }); 

     ko.utils.registerEventHandler(element, "mouseout", function() { 
      ko.utils.toggleDomNodeCssClass(element, ko.utils.unwrapObservable(css), false); 
     });  
    } 
}; 

var Item = function(name) { 
    this.name = ko.observable(name); 
}; 

var viewModel = { 
    items: ko.observableArray([ 
     new Item("one"), 
     new Item("two"), 
     new Item("three") 
    ]) 
}; 

ko.applyBindings(viewModel); 

Вы могли даже получить более изощренными и он работает в делегированных моды, как on, поставив связывание на более высоком уровне и применяя переключатель, основанный на селекторе.

Что касается эмпирического правила, я считаю, что разработчик должен ли он использовать код подключения или декларативно, когда функциональность не требует данных из модели представления. В вашем случае, вероятно, достаточно хорошо придерживаться on, пока он не потребует данных из вашей модели просмотра.