Quel est le meilleur moyen de masquer l'écran pendant que les liaisons knockout js sont construites ?

Question

Je suis un grand fan de Knockoutjs. Je l'utilise pour tout mon développement web maintenant et je l'aime tout simplement. Une chose que je n'ai pas réussi à comprendre, c'est comment masquer l'interface utilisateur pendant que les liens knockoutjs sont construits.

Par exemple, j'ai une interface utilisateur très robuste avec de nombreux modèles utilisés sur ma page. Le problème que je constate est que lorsque l'utilisateur visite la page pour la première fois, il voit tous mes modèles pendant une fraction de seconde avant que les liens n'interviennent et les cachent.

Quelle est la meilleure façon de résoudre ce problème ? J'ai essayé d'utiliser des classes d'aide pour les masquer, mais les modèles ne peuvent pas être affichés à l'aide des liens "visible" et "if", sauf si je supprime la référence à la classe d'aide (c'est-à-dire ui-helper-hidden).

Answer 1

J'étais justement en train de chercher sur Google, et après avoir utilisé la méthode observable, j'ai pensé à une autre approche :

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

Vous n'avez pas besoin d'un observable, le visible sera toujours évalué à true une fois la liaison de données effectuée.

Answer 2

Il y a plusieurs stratégies que vous pouvez utiliser ici.

-La première consiste à placer tout votre contenu réel dans des modèles qui vivent dans des balises script (cela fonctionne bien avec les modèles natifs). À l'intérieur du modèle, vous pouvez ensuite utiliser des liaisons de flux de contrôle. Ce serait comme :

<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>

-Un autre choix consiste à utiliser style="display: none" sur l'élément conteneur ainsi qu'un visible qui peut être liée à une loaded où vous changez l'observable en true après que les fixations aient été appliquées.

Answer 3

Voici une méthode uniquement en CSS si vous craignez que des widgets non stylisés n'apparaissent avant la liaison de l'option Implémentations MVVM .

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

Je ne l'ai pas testé sur tous les widgets Kendo, mais cela semble fonctionner pour la plupart.

Answer 4

Voici une autre approche qui consiste à utiliser des classes pour "cacher" et "montrer" au lieu d'un style en ligne. Ajoutez une classe "hide" à l'élément qui doit être masqué jusqu'à ce que le contenu soit chargé, et ajoutez une liaison de données "css" pour qu'il soit affiché lorsqu'il est lié.

<div class="hide" data-bind="css: {'show': true}">

</div>

Les classes "hide" et "show" sont déjà définies dans Bootstrap.

Si Bootstrap n'est pas utilisé, le CSS peut être défini comme suit :

.hide {
  display: none !important;
}
.show {
  display: block !important;
} 

L'ordre est important. La classe "hide" doit être définie avant "show".