2011-10-25 10 views
7

यहाँ एक अजीब थोड़ा मुद्दा मैं गतिशील divs की एक सरणी के लिए वर्ग स्थापित करने के साथ सामना करना पड़ा है।knockout.js - आईई -7 सीएसएस वर्ग जारी करना

का उपयोग Knockout.js मैं 'attr' बंधन के माध्यम से इस्तेमाल किया कक्षाओं बताए रहा हूँ।

यह सभी ब्राउज़रों मैं IE-7

मैं एक jsfiddle उदाहरण स्थिर प्रकाश डाला issue here

उदाहरण में (ऊपर है (के बारे में आईई -6 आदि चिंतित नहीं) को छोड़कर परीक्षण किया है में अच्छी तरह से काम पंक्ति) नीचे एक (ko उत्पन्न) IE7 में मैं सिर्फ व्यापक सीएसएस चयनकर्ता रंग (रजत) दिखाई दे रही है से मेल खाना चाहिए

+0

मैं jsfiddle नवीनीकृत किया है शीर्षक अब वर्ग के रूप में ही होने वाली है। आप गतिशील वर्गों पर होवर करते हैं कि आप देख सकते शीर्षक है कि उत्तर के लिए सही ढंग से –

उत्तर

10

IE7 आप className बजाय class सेट है कि आवश्यकता है।

उदाहरण के लिए, इस IE7 और अन्य ब्राउज़रों में काम करता है: http://jsfiddle.net/thirtydot/VVuGh/14/

<div data-bind='attr: { "class": classes, "className": classes }'></div> 

हालांकि, इस IE7 मोड़ के लिए समर्थन आदर्श अपने HTML में नहीं होना चाहिए। Knockout.js के अंदर एक बेहतर जगह होगी, हालांकि मुझे पुस्तकालय के बारे में कुछ भी ऐसी सिफारिश करने में सक्षम होने के बारे में कुछ नहीं पता है।

+0

धन्यवाद ढेर किया जा रहा है कि! –

0

यदि आप टेम्पलेट जेनरेट करते समय अपना वर्ग नाम निर्धारित नहीं किया जा सकता है (यानी यह आपके मॉडल का हिस्सा है), तो आप custom binding बना सकते हैं।

अपने init/update तरीकों की सामग्री सिर्फ तुम क्या valueAccessor द्वारा दिया जाता है पर आधारित element के लिए वर्ग के नाम तय करेगा। एक साधारण उदाहरण के लिए, आप (jQuery का उपयोग) कर सकता है:

ko.bindingHandlers.yourBindingName = { 
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) { 
     // This will be called when the binding is first applied to an element 
     // Set up any initial state, event handlers, etc. here 

     $(element).addClass(valueAccessor()); 

    }, 
    update: function(element, valueAccessor, allBindingsAccessor, viewModel) { 
     // This will be called once when the binding is first applied to an element, 
     // and again whenever the associated observable changes value. 
     // Update the DOM element based on the supplied values here. 

    } 
}; 

आप एक अधिक जटिल नॉकआउट css binding के आधार पर बंधन का निर्माण हो सकता है। http://jsfiddle.net/VVuGh/11/ - -