नॉकआउट जेएस: रोकें divs को दृश्यमान करने के लिए बाध्य: स्क्रीन पर चमकने से

मैं एक पृष्ठ पर उन अनुप्रयोगों पर काम कर रहा हूं जिनमें छिपे हुए divs का एक समूह है, बाध्य (या यह बाध्य है?) visible: के साथ नॉकआउटजेएस में। जब पृष्ठ लोड होता है, तो वे सभी स्क्रीन पर क्षणिक रूप से फ्लैश करते हैं। मैंने अपने जेएस को <head></head> में ले जाने का प्रयास किया है, लेकिन इसका कोई प्रभाव नहीं पड़ा, इसलिए पृष्ठ के निचले हिस्से में जेएस लोड करना ऐसा नहीं है।नॉकआउट जेएस: रोकें divs को दृश्यमान करने के लिए बाध्य: स्क्रीन पर चमकने से

दुर्भाग्य

, visible: बाध्यकारी सीएसएस display विशेषता के लिए प्रचार नहीं कर रहा है, तो मैं पृष्ठ लोड पर display: none; उपयोग नहीं कर सकते, या visible: बिल्कुल काम नहीं होगा। जब तक ... मैं display: none; के साथ पृष्ठ लोड करता हूं और फिर इसे पहली बार बदलता हूं जब मैं किसी उपयोगकर्ता को div दिखाता हूं।

लेकिन क्या यह हासिल करने के लिए एक और शानदार तरीका है?

स्रोत

2012-10-08 solefald

के संभावित डुप्लिकेट [सबसे अच्छा तरीका स्क्रीन जबकि नॉकआउट js को छिपाने के लिए क्या है के रूप में ही है बाइंडिंग का निर्माण किया जा रहा है?] (http://stackoverflow.com/questions/9532595/what-is-the-best-way-to-hide-the- स्क्रीन-while-knockout-js- बाइंडिंग-are-being-bui) –

Wth KnockoutJS, मैं display:none साथ hidden कहा जाता है एक CSS वर्ग को परिभाषित करते हुए इस समस्या को हल, तो मैं इस वर्ग को जोड़ने और चमकती कंटेनर के लिए बाध्य होगी:

class="hidden" data-bind="css: { hidden: false }"

स्रोत

2012-10-08 05:31:42 Tuan

वह * बिल्कुल * क्या है मुझे चाहिए था! धन्यवाद! – solefald

आप सर एक उद्धारकर्ता हैं –

उन्होंने क्या कहा ^। इस शानदार जवाब के लिए धन्यवाद! –

मैं रख कर इस हल मेरी " फ्लैश "सामग्री स्क्रिप्ट टेम्पलेट में और टेम्पलेट को लोड करने के लिए को के वर्चुअल तत्वों का उपयोग करें जब चर दूसरे वर्चुअल तत्व द्वारा सेट किया गया हो।

उदाहरण के लिए:

<!-- ko if: myVariable --> 
<!-- ko template: { name: 'myTemplate' } --><!-- /ko --> 
<script type="text/html" id="myTemplate"> 
    <ul data-bind="foreach: blah..."> 
     <li></li> 
    </ul> 
</script> 
<!-- /ko -->

तो जब myVariable सेट किया गया है, स्क्रिप्ट कंटेनर की सामग्री टेम्पलेट आभासी तत्व के स्थान पर रखा जाएगा। इस विधि के साथ आप कोई चमकती सामग्री नहीं देखते :-)

स्रोत

2013-04-15 15:05:11 Milaan

इसमें डिस्प्ले न डालने का बोनस है: सबकुछ पर कोई नहीं (जब कोई अन्य डेटा-बाइंड को हटा देता है तो उन्हें डिस्प्ले को हटाना याद नहीं है: कोई भी – roo2

ग्रेट उत्तर मिलान – pimbrouwers

मैंने डिफ़ॉल्ट visible के बजाय उपयोग करने के लिए एक कस्टम बाध्यकारी लिखना समाप्त कर दिया।

function isHidden(el) { 
    var style; 

    style = window.getComputedStyle(el); 

    return (style.display === 'none') 
} 

ko.bindingHandlers['cssVisible'] = { 
    'update': function (element, valueAccessor) { 
     var value, 
      isCurrentlyVisible; 

     value = ko.utils.unwrapObservable(valueAccessor()); 
     isCurrentlyVisible = !isHidden(element); 

     if (value && !isCurrentlyVisible) { 
      ko.utils.toggleDomNodeCssClass(element, 'ko-visible', true); 
     } 
     else if ((!value) && isCurrentlyVisible) { 
      ko.utils.toggleDomNodeCssClass(element, 'ko-visible', false); 
     } 
    } 
}

फिर कुछ सीएसएस को संभालने के लिए दृश्यता

[data-bind*="cssVisible"]:not(.ko-visible) { 
    display: none; 
}

प्रयोग visible बाध्यकारी

<div data-bind="cssVisible: true"></div>

स्रोत

2016-07-08 08:48:35

नॉकआउट जेएस: रोकें divs को दृश्यमान करने के लिए बाध्य: स्क्रीन पर चमकने से

उत्तर

संबंधित मुद्दे