knockoutjs: विकल्प टैग और दृश्यता के साथ समस्या

Question

ऐसा लगता है कि हमारे पास एक HTML चयन विकल्प के विकल्प की दृश्यता पर ब्राउज़र के दो समूहों के बीच एक अलग व्यवहार है: यदि मैं विकल्प टैग में झूठी दिखाई देता हूं, तो प्रासंगिक ड्रॉप डाउन सूची आइटम क्रोम और फ़ायरफ़ॉक्स में छिपा हुआ है लेकिन यह अभी भी आईई 8 और सफारी में दिखाई देता है।

http://jsfiddle.net/v8gyG/12/

आप किसी भी सुझाव है या मैंने कुछ गलत कर रहा हूँ? कृपया ध्यान रखें कि मैं इस मामले में jquery.tmpl.js उपयोग नहीं कर सकते हो, केवल कठिन चयन/विकल्प टैग

Answer 1

मैं जानता हूँ कि यह था बहुत समय पहले पूछा गया था, लेकिन यह जवाब देने योग्य है क्योंकि मुझे Google में यह प्रश्न खुद को ढूंढने के दौरान मिला था। मैंने समाधान को समझ लिया ताकि मैं इसे साझा करने के लिए यहां वापस आ सकूं। दो साल और "दृश्यमान" अभी भी काम नहीं करता **, इसलिए मैंने बाध्यकारी "अगर" चेक किया। विकल्प तत्व के अंदर डेटा बाध्यकारी इसे छुपा लेकिन चयन योग्य बना दिया। नॉकआउट में कुछ भी कहा जाता है: "कंटेनरलेस कंट्रोल फ्लो सिंटैक्स"।

यह मेरे लिए काम करता है:

<!-- ko if: category.parent == 0 --> 
    <option data-bind="value: category.name, text: category.name"></option> 
    <!-- /ko --> 

यह काम करता है क्योंकि छुपाता है अगर डोम। नॉकआउट वेबसाइट से:

यदि दृश्य बाध्यकारी के लिए एक समान भूमिका निभाता है। अंतर है, जिसमें दिखाई देने वाला, निहित मार्कअप हमेशा डीओएम में रहता है और में हमेशा डेटा-बाइंड विशेषता लागू होती है - दृश्यमान बाध्यकारी केवल कंटेनर तत्व की दृश्यता को टॉगल करने के लिए सीएसएस का उपयोग करता है। यदि बाध्यकारी, हालांकि, आपके डीओएम, में निहित मार्कअप को भौतिक रूप से जोड़ता या हटा देता है और अभिव्यक्ति सत्य होने पर केवल वंशजों को बाइंडिंग लागू करता है।

आप दस्तावेज में अधिक पढ़ सकते हैं: http://knockoutjs.com/documentation/if-binding.html

चेक विभिन्न विकल्पों यहाँ: http://jsfiddle.net/v8gyG/24/

** "दृश्यमान" क्रोम 27 और Firefox 21 में लेकिन क्रोम में एकाधिक चयन करें के साथ नहीं काम करता है।

<!-- ko if: --> आईई 10 में और क्रोम में बहुविकल्पीय के साथ भी काम करता है।

Answer 2

कोडित जब आप सेट visible विशेषता, नॉकआउट सिर्फ <option> तत्व करने के लिए एक style="display: none" विशेषता कहते हैं। यह आईई में मान्य नहीं है। देखें:

style.display='none' doesn't work on option tags in chrome, but it does in firefox

Answer 3

कोड आप एक पृष्ठ संख्या को चुनने के लिए चयन का उपयोग कर रहे पता चलता है। एक निर्भर ऑब्सर्जेबल बनाने पर विचार करें जिसमें विकल्प शामिल हैं।

viewModel.Pages = ko.dependentObservable(function() { 
    var pages = [] 
    for (var i=0 ; i < this.NumPages() ; ++i) { 
    pages.push({label: "Pag " + (i+1), value: (i+1)}) 
    } 
    return pages; 
}, viewModel) 

और ध्यान में रखते हुए:

<select data-bind="value: Page, options: Pages, optionsText: 'label'></select> 

जब पेज 2 चुना जाता है, Page चर शामिल होंगे {: 'पग 2', मूल्य: लेबल 2}