Knockout JS: Stop divs binded to visible: dal flashing sullo schermo

Sto lavorando su una singola pagina che ha un sacco di div nascoste, vincolato (o è legato?) A KnockoutJS con visible:. Quando la pagina si carica, tutti lampeggiano momentaneamente sullo schermo. Ho provato a spostare il mio JS nello <head></head>, ma questo non ha avuto alcun effetto, quindi caricare JS nella parte inferiore della pagina non è ciò che lo sta causando.Knockout JS: Stop divs binded to visible: dal flashing sullo schermo

Purtroppo, visible: vincolante non propaga a CSS display attributo, quindi non posso usare display: none; al caricamento della pagina, o visible: non funzionerà affatto. A meno che ... Carico la pagina con display: none; e poi la cambi la prima volta che mostro il div a un utente.

Ma c'è un modo più elegante per raggiungere questo obiettivo?

fonte

2012-10-08 solefald

possibile duplicato di [Qual è il modo migliore per nascondere lo schermo mentre eliminazione diretta js i collegamenti sono in fase di costruzione?] (http://stackoverflow.com/questions/9532595/what-is-the-best-way-to-hide-the-screen-while-knockout-js-bindings-are-being-bui) –

Wth KnockoutJS, ho aggirare questo problema definendo una classe CSS chiamato hidden con display:none, poi aggiungerò questa classe e vincolante al contenitore lampeggiante:

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

fonte

2012-10-08 05:31:42 Tuan

Questo è * esattamente * cosa Avevo bisogno! Grazie! – solefald

Tu signore sei un salvatore –

Cosa hanno detto ^. Grazie per questa brillante risposta! –

Ho risolto questo mettendo la mia " "appariscente" in un modello di script e usa gli elementi virtuali di ko per caricare il modello quando la variabile è impostata da un altro elemento virtuale.

Ad esempio:

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

Così, quando myVariable è impostato, il contenuto del contenitore script verrà messo al posto dell'elemento virtuale di modello. Con questo metodo non vedi alcun contenuto lampeggiante :-)

fonte

2013-04-15 15:05:11 Milaan

questo ha il vantaggio di non mettere il display: nessuno su tutto (quando qualcun altro rimuove il data-bind potrebbe non ricordarsi di rimuovere il display: nessuno – roo2

GRANDE risposta Milaan – pimbrouwers

Ho finito per scrivere un binding personalizzato da utilizzare al posto del valore predefinito 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); 
     } 
    } 
}

Poi alcuni CSS per gestire la visibilità

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

utilizzo è lo stesso del visible vincolante

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

fonte

2016-07-08 08:48:35

Knockout JS: Stop divs binded to visible: dal flashing sullo schermo

risposta

Problemi correlati