Knockoutjs связывают мышь или JQuery

У меня есть этот код в jquery. Как я напишу это в нокауте с привязкой. Или лучше иметь его в jquery. Есть ли умный способ узнать, когда писать в привязке или в jquery? Это больше viewstuff, так что, возможно, это должно быть в JQuery?

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

Ответ 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, пока он не потребует данных из вашей модели просмотра.