web-dev-qa-db-fra.com

Comment empêcher l'affichage HTML avant que la liaison par knock-out soit exécutée

J'utilise les scripts de désactivation suivants dans mon code HTML:

<!-- kno ifnot: bla -->

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

<!-- /ko -->

Le problème que j'ai, c'est qu'avant l'exécution des liaisons, cette ligne s'affiche pendant une seconde ou deux.

Comment puis-je empêcher cela?

knockout.js
64
shenku

Voici un truc simple. Rendez votre élément racine initialement masqué et définissez la liaison visible sur true.

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

Au fur et à mesure qu'il est rendu, avant que KO ne le fasse, il sera d'abord caché. Lorsque les liaisons sont appliquées, le masquage remplace le style et le rend visible.

Vous pouvez également jeter votre vue dans un bloc de script et l'instancier via un modèle. Les blocs de script ne seront pas rendus mais seront visibles lorsque knockout rendra le modèle.

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

Comme le comportement souhaité varie souvent de page en page, c’est ce que je fais dans mon fichier de présentation/modèle (ASP.NET). 

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

Lorsque la page est liée:

  • La classe ko-unbound est supprimée de la page (initialement ajoutée avec l'attribut class).
  • La classe ko-bound est ajoutée à la page.

Ensuite, dans une page où le contenu indésirable est un problème, je peux personnaliser le CSS pour afficher ou masquer des éléments basés sur ces deux classes. J'utilise également cette technique pour montrer une image de «chargement» ou peut-être imposer une hauteur minimale à un élément.

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

Lors des tests, lors de l'application de liaisons, j'ajoute un délai d'attente pour pouvoir voir le flash.

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

 }, 300);
2
Simon_Weaver

Enveloppez votre HTML dans quelque chose comme ça -

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

Ensuite, dans votre JavaScript, ajoutez la ligne jQuery suivante après votre liaison apply -

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

C'est la méthode la plus simple que j'ai trouvée qui fonctionne. Vous pouvez le faire avec certaines liaisons défonçables, mais vous perdez la garantie de chronométrage car vous ne pouvez pas contrôler les liaisons d’ordre exécutées.

1
photo_tom

Une autre solution, que j'ai trouvée ici

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

Cela présente l’avantage - ou le désavantage, selon vos besoins - que cet espace soit réservé au contenu masqué. La page ne "sautera" pas lorsque les liaisons seront appliquées.

0
Klaus Ole Kristiansen