javascript - ¿Cuál es la mejor manera de ocultar la pantalla mientras se crean los enlaces js knockout?

mvvm knockout.js

Question

Soy un gran fan de knockoutjs. Lo uso para todo mi desarrollo web ahora y simplemente me encanta. Sin embargo, una cosa que no he podido descifrar es cómo ocultar la UI mientras se crean los enlaces knockoutjs.

Por ejemplo, tengo una interfaz de usuario muy sólida con muchas plantillas en mi página. El problema que estoy notando es que cuando el usuario visita por primera vez la página, ellos ven todas mis plantillas por una fracción de segundo antes de que los enlaces entren y los oculten.

¿Cuál es la mejor manera de solucionar este problema? He intentado usar clases auxiliares para ocultarlas, pero luego las plantillas no se pueden mostrar usando enlaces ''visibles'' y ''si'' a menos que elimine la referencia de la clase auxiliar (es decir, ui-helper-hidden).

Answer 1

Estaba buscando en Google para esto, y después de usar la forma observable, pensé en otro enfoque:

<div style="display: none" data-bind="visible: true">
  <ul data-bind="foreach: items">
    <li data-bind="text: name"></li>
  </ul>
</div>

No necesita un observable, el visible siempre se evaluará como verdadero una vez que se haya completado el enlace de datos.

Answer 2

Este es un método exclusivo de CSS si le preocupan los widgets sin estilo que aparecen antes del enlace para las implementaciones de MVVM .

[data-role]:not([role], [tabindex]) {
    visibility: hidden;
}

No lo he probado en todos los widgets de Kendo, pero parece funcionar para la mayoría.

Answer 3

Hay un par de estrategias que puedes usar aquí.

-Uno es colocar todo su contenido real en plantillas que viven en etiquetas de script (funciona bien con plantillas nativas). Dentro de la plantilla, puede usar enlaces de control-flujo. Esto sería como:

<div data-bind="template: ''contentTmpl''"></div>

<script id="contentTmpl" type="text/html">
   <ul data-bind="foreach: items">
       <li data-bind="text: name"></li>
   </ul>
</script>

-Otra elección es usar style="display: none" en el elemento contenedor junto con un enlace visible que puede vincularse a un observable loaded donde se cambia el observable a true después de que se hayan aplicado los enlaces.