Knockoutjs bind mouseover o Jquery

Question

Ho questo codice in jquery. Come scriverei questo in knockout con il binding. O è meglio averlo in jquery. C'è un modo intelligente per sapere quando scriverlo in binding o in jquery? Questa è più vista quindi forse dovrebbe essere in Jquery?

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

Answer 1

Se la commutazione di questa classe non ha davvero bisogno di connettersi ai dati nel modello di vista, allora non c'è davvero alcun motivo che non si poteva fare quello che stai facendo ora.

Ecco un esempio di come farlo con le associazioni di default:

vista:

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

visualizzazione del codice modello:

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 attacchi personalizzati si potrebbe anche ridurlo fino a:

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

vista del modello:

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

Si potrebbe anche ottenere più sofisticati e farlo funzionare in modo delegato come on mettendo il legame a un livello superiore e applicando l'interruttore sulla base di un selettore.

Per quanto riguarda la regola generale, ritengo che spetti allo sviluppatore decidere se utilizzare il codice wire up o farlo in modo dichiarativo quando la funzionalità non richiede dati dal modello di visualizzazione. Nel tuo caso, probabilmente abbastanza buono da rimanere con on finché non richiede dati dal tuo modello di visualizzazione.