नॉकआउटज बाइंड माउसओवर या Jquery

Question

मेरे पास यह कोड jquery में है। मैं इसे बाध्यकारी के साथ नॉकआउट में कैसे लिखूंगा। या यह jquery में होना बेहतर है। बाध्यकारी या jquery में लिखने के लिए यह जानने का एक स्मार्ट तरीका है? यह अधिक दृश्यमान है तो शायद यह 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 के साथ चिपकने के लिए पर्याप्त अच्छा है जब तक कि इसे आपके दृश्य मॉडल से डेटा की आवश्यकता न हो।