Knockoutjs lier mouseover ou Jquery

J'ai ce code en jquery. Comment pourrais-je écrire cela dans knock-out avec de liaison.
Ou est-il mieux de l'avoir en jquery. Est-il une façon intelligente pour savoir quand l'écrire en liaison ou en jquery? C'est plus viewstuff alors peut-être il devrait être en Jquery ?

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

source d'informationauteur user1199595

  1. 37

    Si le basculement de cette classe n'a pas vraiment besoin de se connecter aux données de votre modèle de vue, alors il n'y a vraiment aucune raison que tu ne pouvais pas faire ce que vous faites maintenant.

    Voici un exemple de comment le faire avec les liaisons par défaut:

    vue:

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

    afficher le code de modèle:

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

    Avec des liaisons personnalisées vous pouvez même réduire vers le bas:

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

    modèle de vue:

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

    Vous pourriez même obtenir plus sophistiqués et de le faire travailler dans un délégué de la mode comme on en mettant la liaison à un niveau plus élevé et de l'application de la bascule basé sur un sélecteur.

    Autant qu'une règle de pouce, je pense que c'est au développeur de savoir si ils veulent utiliser des fils de code ou de le faire de manière déclarative lorsque la fonctionnalité ne nécessite pas de données à partir du modèle de vue. Dans votre cas, probablement assez bonne pour coller avec on jusqu'à ce qu'il exige des données à partir de votre modèle de vue.