KnockoutJS मूल्य टॉगल

Question

मैं जावास्क्रिप्ट का एक सा है:

function ViewModel() { 
    var self = this; 
    self.highlight = ko.observable(true); 
} 

ko.applyBindings(new ViewModel()); 

और एचटीएमएल कि यह पूरक:

<div data-bind="css: { highlighted: highlight }, click: highlight(!highlight())"> 
    random string 
</div> 

मैं क्या हासिल करने की कोशिश कर रहा हूँ:

1. सीएसएस क्लास 'हाइलाइट किया गया' केवल तभी सक्रिय किया जा सकता है जब var हाइलाइट सही हो
2. क्लिक करना div वर हाइलाइट का bool मूल्य टॉगल करेगा
3. वांटेड परिणाम: सक्रिय करने के लिए div पर क्लिक/निष्क्रिय अपने सीएसएस वर्ग

क्या मैं हो रही है:

1. आकर्षण का प्रारंभिक मूल्य true है, फिर भी सीएसएस वर्ग निष्क्रिय हो जाता है (यदि मैं प्रारंभिक मान false पर बदलता हूं, तो सीएसएस क्लास सक्रिय है: ऐसा लगता है कि मैंने किसी भी तरह से क्लिक बाध्य ट्रिगर किया है जब मैंने अभी तक कुछ भी क्लिक नहीं किया है)
2. div की सीएसएस कक्षा टॉगल नहीं है

पर क्लिक करें, मैं व्यूमोडेल के अंदर एक नया संबंधित क्लिक फ़ंक्शन नहीं बनाऊंगा। मैं देख रहा हूं कि थोड़ा सा कोड के लिए मैं डेटा-बाइंड के भीतर पूरी तरह से इनलाइन रख सकता हूं।

यहाँ JSFiddle पर कोड है: http://jsfiddle.net/4wt4x/1/

किसी को भी व्याख्या कर सकते हैं क्या हो रहा है और मैं गलत तरीके से क्या कर रही हूं?

Answer 1

आपका click: highlight(!highlight()) गलत है। एक फ़ंक्शन निष्पादित करने का प्रयास करने के लिए क्लिक करने जा रहा है, और जब बाध्यकारी प्रारंभ किया गया था, तो हाइलाइट जो कुछ भी उसके मूल्य को वापस कर देता था और यही वह क्लिक है जो आपके मामले में निष्पादित करने की कोशिश करने जा रहा है (true या false)। अपने मॉडल में

अपने जावास्क्रिप्ट में, जगह:: आप कुछ इस तरह करने की ज़रूरत http://jsfiddle.net/KDypD/1/

आप की जरूरत हो सकता है:

self.toggleHighlight = function() { self.highlight(!self.highlight()) }; 

फिर बदल कहना click: toggleHighlight

तो जैसा बंधन अपने हाइलाइट प्रारंभिक मूल्य को समायोजित करने के साथ-साथ यह दर्शाता है कि आप पृष्ठ को प्रारंभ में कैसे दिखाना चाहते हैं।

Answer 2

मुझे पता है कि यह एक पुराना सवाल है, लेकिन शायद किसी की मदद कर सकता है। आप स्थानों का एक बहुत में टॉगल उपयोग करने के लिए की जरूरत है, हो सकता है कुछ कस्टम बंधन चीनी आप मदद कर सकता है:

बाइंडिंग:

ko.bindingHandlers.toggleClick = { 
    init: function (element, valueAccessor) { 
     var value = valueAccessor(); 

     ko.utils.registerEventHandler(element, "click", function() { 
      value(!value()); 
     }); 
    } 
}; 

उपयोग:

<div data-bind="css: { highlighted: highlight }, toggleClick: highlight"> 
    random string 
</div> 

उदाहरण :

http://jsfiddle.net/A28UD/1/

यह दृष्टिकोण मेरे कुछ विचारों को बहुत साफ रखता है। आशा करता हूँ की ये काम करेगा।

Answer 3

तुम सच में इनलाइन क्या करना चाहते हैं:

<div data-bind="click: highlight.bind($root, !highlight()), css: { highlighted: highlight } "> 
    random string 
</div> 

जहां मुख्य आकर्षण बूलियन मानने योग्य है।

Answer 4

एक अन्य विकल्प (कस्टम समारोह एक्सटेंडर के बजाय प्रयोग किया जाता है क्योंकि वहाँ कोई पैरामीटर होते हैं और यह क्लीनर दिखता है) एक पुन: प्रयोज्य कस्टम समारोह एक्सटेंशन का उपयोग करने के लिए है:

ko.observable.fn.toggleable = function() { 
    var self = this; 
    self.toggle = function() { 
     self(!self()); 
    }; 

    return self; 
}; 

प्रयोग

self.highlight = ko.observable(true).toggleable(); 

एचटीएमएल

<div data-bind="css: { highlighted: highlight }, click: highlight.toggle"> 
    random string 
</div>