Knockoutjs绑定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直到它需要您的视图模型中的数据.