knockout.js - knockout - Cómo evitar que Html se muestre antes de que se ejecute el enlace no válido

knockoutjs self

Question

Estoy usando las siguientes secuencias de comandos knockout en mi Html:

<!-- kno ifnot: bla -->

 <tr><td>some stuff</td></tr>

<!-- /ko -->

El problema que tengo es que antes de que se ejecuten las vinculaciones, esta fila se mostrará durante uno o dos segundos.

¿Cómo puedo evitar que esto suceda?

Answer 1

Aquí hay un truco simple. Simplemente haga que su elemento raíz se oculte inicialmente y establezca el enlace visible en verdadero.

<div style="display: none;" data-bind="visible: true">
    <!-- the rest of your stuff -->
</div>

A medida que se representa, antes de que el nocaut haga lo suyo, se ocultará inicialmente. Cuando se aplican los enlaces, el knockout anulará el estilo y lo hará visible.

Alternativamente, puede lanzar su vista en un bloque de script y crear una instancia a través de una plantilla. Los bloques de scripts no se mostrarán, pero serán visibles cuando el knockout represente la plantilla.

<!-- ko template: ''myView'' --><!-- /ko -->
<script id="myView" type="text/html">
    <!-- the rest of your stuff -->
</script>

Answer 2

Dado que el comportamiento que desea a menudo varía de una página a otra, esto es lo que estoy haciendo en mi archivo de diseño / plantilla (ASP.NET).

 <div class="ko-unbound" data-bind="css: { ''ko-unbound'': false, ''ko-bound'': true }">
    @RenderBody()
 </div>

Cuando la página está vinculada:

• ko-unbound clase ko-unbound se elimina de la página (inicialmente se agrega con el atributo de class ).
• ko-bound clase ko-bound se agrega a la página.

Luego, en una página donde el contenido no deseado es un problema, puedo personalizar el CSS para mostrar u ocultar cosas basadas en estas dos clases. También uso esta técnica para mostrar una imagen de "carga" o quizás imponer una altura mínima para un elemento.

.ko-unbound #storeWizard
{
    display: none;  // hide entire section when the page is binding
}

.ko-bound #loadingGraphic
{
    display: none;  // hide loading graphic after page is bound
}

Durante las pruebas, al aplicar enlaces agrego un tiempo de espera para poder ver el flash.

 setTimeout(function ()
 {
     ko.applyBindings(RR.VM);

 }, 300);

Answer 3

Envuelve tu html en algo como esto -

<div id="hideme" style="display:none">
</div>

Luego, en su JavaScript, agregue la siguiente línea de jquery después de su enlace de solicitud:

$(''#hideme'').show(); 

Este es el método más simple que he encontrado que funciona. Puedes hacer esto con algunos enlaces knockout, pero pierdes tiempo garantizado porque no puedes controlar que se ejecuten los enlaces de órdenes.

Answer 4

Otra solución, que encontré here

<div id="binding-start" style="visibility:hidden" data-bind="attr: { ''style'': ''visibility:visible'' }" />

Esto tiene la ventaja, o la desventaja, dependiendo de sus necesidades, de que el espacio estará reservado para el contenido oculto. La página no "saltará" cuando se apliquen los enlaces.