jquery - Knockoutjs 绑定(bind)鼠标悬停或 Jquery

Question

我在 jquery 中有这段代码。我该如何在带有绑定(bind)的 knockout 中写这个。 或者把它放在 jquery 中更好。有没有一种聪明的方法来知道何时将其写入绑定(bind)或 jquery 中？这是更多的 View ，所以也许它应该在 Jquery 中？

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

Answer 1

如果此类的切换并不真正需要连接到 View 模型中的数据，那么您确实没有理由不能执行现在正在执行的操作。

以下是如何使用默认绑定(bind)执行此操作的示例:

查看:

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

使用自定义绑定(bind)，您甚至可以将其减少为:

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

您甚至可以变得更复杂，通过将绑定(bind)置于更高级别并基于选择器应用切换，让它以委托(delegate)方式工作，例如 on。

根据经验，我认为当功能不需要 View 模型中的数据时，开发人员是否想要使用连接代码或以声明方式执行它取决于开发人员。在您的情况下，可能足以坚持使用 on 直到它需要来自 View 模型的数据。