Knockoutjs绑定mouseover或Jquery

前端之家收集整理的这篇文章主要介绍了Knockoutjs绑定mouseover或Jquery前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在 jquery中有这个代码.我将如何用绑定的方式将其写入敲门.
或者最好在jquery中使用它.有没有聪明的方式知道什么时候在绑定或jquery中写?这是更多的观点,所以也许应该在 Jquery
$("body").on("mouSEOver mouSEOut",'.hoverItem',function () {
    $(this).toggleClass('k-state-selected');
});

解决方法

如果这个类的切换并不真正需要连接到你的视图模型中的数据,那么真的没有理由不能做你现在在做的事情.

以下是使用默认绑定进行操作的示例:

视图:

<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",false);
        });      
    } 
};

var Item = function(name) {
    this.name = ko.observable(name);
};

var viewmodel = {
    items: ko.observableArray([
        new Item("one"),new Item("three")
    ])
};

ko.applyBindings(viewmodel);

您甚至可以获得更复杂的功能,并以委托方式工作,如通过将绑定放在更高级别并根据选择器应用切换.

根据经验法则,我认为由开发人员决定是否要使用有线代码,或者在功能不需要来自视图模型的数据时以声明方式进行.在你的情况下,可能足够坚持,直到它需要你的视图模型的数据.

原文链接:https://www.f2er.com/jquery/180151.html

猜你在找的jQuery相关文章