Knockout JS: detener divs binded a visible: de flashear en la pantalla

Estoy trabajando en una sola página de aplicaciones que tiene un montón de divs ocultos, enlazados (¿o está obligado?) A KnockoutJS con visible:. Cuando la página se carga, todos parpadean momentáneamente en la pantalla. He intentado mover mi JS al <head></head>, pero eso no tuvo ningún efecto, por lo que cargar JS en la parte inferior de la página no es lo que está causando.Knockout JS: detener divs binded a visible: de flashear en la pantalla

Desafortunadamente, visible: unión no propaga a CSS display atributo, así que no puedo usar display: none; al cargar la página, o visible: no van a funcionar. A menos que ... Cargue la página con display: none; y luego la cambie la primera vez que le muestre el div a un usuario.

¿Pero hay una manera más elegante de lograr esto?

Fuente

2012-10-08 solefald

posible duplicado de [¿Cuál es la mejor manera de ocultar la pantalla mientras knockout js enlaces se están construyendo?] (http://stackoverflow.com/questions/9532595/what-is-the-best-way-to-hide-the-screen-while-knockout-js-bindings-are-being-bui) –

Wth KnockoutJS, soluciona este problema mediante la definición de una clase CSS llamada hidden con display:none, a continuación, voy a añadir esta clase y se une al contenedor intermitente:

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

Fuente

2012-10-08 05:31:42 Tuan

Eso es * exactamente * qué ¡Lo necesitaba! ¡Gracias! – solefald

Usted señor es un salvador –

Lo que dijeron ^. Gracias por esta brillante respuesta! –

He resuelto esto poniendo mi " llamativo "contenido en una plantilla de script y utilizar elementos virtuales de ko para cargar la plantilla cuando la variable se establece por otro elemento virtual.

Por ejemplo:

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

Por eso, cuando se establece myVariable, el contenido del recipiente guión será puesto en lugar del elemento virtual plantilla. Con este método no se ve ningún contenido intermitente :-)

Fuente

2013-04-15 15:05:11 Milaan

tiene la ventaja de no mostrar: ninguno en todo (cuando alguien más elimina datos, puede que no olviden quitar la pantalla: ninguno – roo2

GRAN respuesta Milaan – pimbrouwers

Terminé escribiendo un enlace personalizado para usar en lugar del visible predeterminado.

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); 
     } 
    } 
}

A continuación, un poco de CSS para manejar la visibilidad

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

El uso es el mismo que el visible vinculante

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

Fuente

2016-07-08 08:48:35

Knockout JS: detener divs binded a visible: de flashear en la pantalla

Respuesta

Cuestiones relacionadas