Knockoutjs bind mouseover veya Jquery

Question

Bu kodu jquery'de aldım. Bunu nakavtla nasıl yazabilirim? Ya da jquery içinde sahip olmak daha iyidir. Ne zaman bağlayıcı veya jquery içinde yazacağını bilmek için akıllı bir yolu var mı? Bu daha fazla görüntüleyici yani belki de Jquery'de olmalı? Bu sınıfın değiştirilirken gerçekten değil görünümünüzü modelinde verilere bağlanmak gerekiyorsa

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

Answer 1

, o zaman şimdi ne yaptığını yapmaması için hiçbir sebep gerçekten yoktur.

görünüm::

<ul data-bind="foreach: items"> 
    <li data-bind="text: name, event: { mouseover: toggle, mouseout: toggle }, css: { hover: selected }"></li> 
</ul> 

görmek model kodu: Özel bağlamaları ile

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

sen bile azaltabilecek İşte

varsayılan bağları ile bunu nasıl bir örneğidir aşağı doğru:

<ul data-bind="foreach: items"> 
    <li data-bind="text: name, hoverToggle: 'hover'"></li> 
</ul> 

görünüm modeli:

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

Hatta daha sofistike ve daha yüksek bir düzeyde bağlayıcı koyarak ve bir selektör dayalı geçiş düğmesini uygulayarak on gibi yetkilendirilen tarzda çalışmak olabilir.

Başa dönme kuralıyla ilgili olarak, tel sürme kodunu kullanmak isteyip istemediklerini ya da işlevselliğin görünüm modelinden veri gerektirmediğinde bunu deklaratif olarak yaptıklarını düşünüyorum. Sizin durumunuzda, görünüm modelinizden veriye ihtiyaç duyana kadar muhtemelen on ile yapışacak kadar iyi.