Knockoutjs bind mouseover o Jquery

Question

Tengo este código en jquery. ¿Cómo podría escribir esto en knockout con enlace? O es mejor tenerlo en jquery. ¿Hay alguna manera inteligente de saber cuándo escribirlo en enlace o en jquery? Esto es más viewstuff así que tal vez debería ser en Jquery?

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

Answer 1

Si la conmutación de esta clase en realidad no necesita conectarse a los datos en su modelo de vista, entonces no hay realmente ninguna razón para que no se podía hacer lo que está haciendo ahora.

Este es un ejemplo de cómo hacerlo con los enlaces por omisión:

vista:

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

vista de código modelo:

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

con los enlaces personalizados que incluso podría reducirlo hasta:

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

vista del modelo:

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

incluso se podría conseguir más sofisticados y tienen que funcione de una manera como delegado on poniendo la unión en un nivel superior y aplicar la palanca sobre la base de un selector.

En cuanto a una regla de oro, creo que depende del desarrollador si quieren usar el código de cableado o hacerlo declarativamente cuando la funcionalidad no requiere datos del modelo de vista. En su caso, probablemente sea lo suficientemente bueno como para seguir con on hasta que requiera datos de su modelo de vista.