web-dev-qa-db-fra.com

Quel est le meilleur moyen de masquer l'écran pendant la construction des liaisons knockout js?

Je suis un grand fan de knockoutjs. Je l'utilise maintenant pour tout mon développement Web et je l'aime tout simplement. Une chose que je n'ai pas encore compris, c'est comment cacher l'interface utilisateur pendant la construction des liaisons knockoutjs.

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

Quel est le meilleur moyen de résoudre ce problème? J'ai essayé d'utiliser des classes auxiliaires pour les masquer, mais les modèles ne peuvent pas être affichés à l'aide des liaisons "visible" et "if", à moins que je ne supprime la référence de la classe auxiliaire (c'est-à-dire. Ui-helper-hidden).

javascriptmvvmknockout.js
76
Luc

Vous pouvez utiliser quelques stratégies ici. 

-Une option consiste à placer l'intégralité de votre contenu dans des modèles hébergés dans des balises de script (fonctionne correctement avec les modèles natifs). Dans le 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 avec une liaison visible qui peut être liée à une observable loaded dans laquelle vous changez l'observable en true après que les liaisons ont été appliquées.

70
RP Niemeyer

Je cherchais juste pour cela, 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'observable, le visible sera toujours considéré comme vrai une fois la liaison de données terminée.

191
Jason More

Voici une méthode uniquement en CSS si vous craignez que des widgets sans style n'apparaissent avant la liaison pour Implémentations de MVVM .

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

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

0
Sunny Patel

Voici une approche alternative utilisant des classes pour "masquer et" afficher "au lieu d'un style en ligne. Ajoutez une classe" masquer "à l'élément à masquer jusqu'au chargement du contenu, puis ajoutez une liaison de données" css "pour le rendre être montré quand il est lié.

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

</div>

Les classes "masquer" et "afficher" 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 compte. La classe "hide" doit être définie avant "show".

0
M Y K