Knockoutjs绑定mouseover或Jquery

Knockoutjs绑定mouseover或Jquery,jquery,knockout.js,Jquery,Knockout.js,我在jquery中有这段代码。我将如何写这在击倒与绑定。 还是将它放在jquery中更好。有没有一种聪明的方法可以知道何时在绑定或jquery中编写它?这是更多的viewstuff,所以也许它应该在Jquery中 $("body").on("mouseover mouseout", '.hoverItem', function () { $(this).toggleClass('k-state-selected'); }); 如果这个类的切换实际上不需要连接到视图模型中的数据,那么就没

我在jquery中有这段代码。我将如何写这在击倒与绑定。 还是将它放在jquery中更好。有没有一种聪明的方法可以知道何时在绑定或jquery中编写它?这是更多的viewstuff,所以也许它应该在Jquery中

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

如果这个类的切换实际上不需要连接到视图模型中的数据,那么就没有理由不执行现在正在执行的操作

以下是如何使用默认绑定的示例:

视图:

使用自定义绑定,您甚至可以将其缩减为:

<ul data-bind="foreach: items">
    <li data-bind="text: name, hoverToggle: 'hover'"></li>
</ul>
通过将绑定放在更高的级别并应用基于选择器的切换,您甚至可以变得更复杂,并使其以委托方式工作,如on


根据经验,我认为开发人员应该决定是使用连接代码,还是在功能不需要来自视图模型的数据时以声明的方式使用。在您的情况下,在需要来自视图模型的数据之前,可能足够好地坚持使用
on

同意。如果不使用数据,那么使用哪种方法确实是任意的。但是在这种情况下,为什么不使用CSS来应用mouseover类呢?这是最简单的方法是的,如果选择器/类是静态的,那么它可以放在CSS中。唯一需要考虑的是,我认为IE7在以下方面存在一些问题:hover.Thank,你们两位的意见都很好。敲除自定义绑定是如此强大。但在这种情况下,我想我会使用css。
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);