So verhindern Sie, dass HTML angezeigt wird, bevor die Knockout-Bindung ausgeführt wird

70

Ich verwende die folgenden Knockout-Skripte in meinem HTML:

<!-- kno ifnot: bla -->

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

<!-- /ko -->

Das Problem, das ich habe, ist, dass diese Zeile vor dem Ausführen der Bindungen für ein oder zwei Sekunden angezeigt wird.

Wie kann ich dies verhindern?

knockout.js shenku
quelle

Antworten:

156

Hier ist ein einfacher Trick. Machen Sie einfach Ihr Root-Element zunächst ausgeblendet und setzen Sie die sichtbare Bindung auf true.

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

Während es gerendert wird, wird es zunächst ausgeblendet, bevor Knockout seine Sache macht. Wenn die Bindungen angewendet werden, überschreibt Knockout den Stil und macht ihn sichtbar.

Alternativ können Sie Ihre Ansicht in einen Skriptblock werfen und über eine Vorlage instanziieren. Die Skriptblöcke werden nicht gerendert, sind jedoch sichtbar, wenn Knockout die Vorlage rendert.

<!-- ko template: 'myView' --><!-- /ko -->
<script id="myView" type="text/html">
    <!-- the rest of your stuff -->
</script>
Jeff Mercado
quelle
10
Ich mag dies besser als Toms Lösung, da es nur auf Knockout beruht, um den HTML-Code einzublenden.
Kyeotic
genau das, was ich getan habe (dann hier zurückgecheckt und die gleiche Lösung; S)
Shenku
Dies funktioniert bei mir nicht, wenn Bootstrap verwendet wird d-none.
Josh Gust
1
Beachten Sie, dass dies nur funktioniert, wenn Sie den Inline- Stil zum Festlegen verwenden display: none. (Hintergrund: Ausblenden des Elements über Klassenstil nicht funktioniert , da Knockout entfernt das display. Stil Inline wenn macht das Element sichtbar über die Bindung Dann wird Ihr Klassenstil übernehmen und das Element verbergen für immer.)
Heinrich Ulbricht
2

Da das gewünschte Verhalten häufig von Seite zu Seite unterschiedlich ist, mache ich dies in meiner Layout- / Vorlagendatei (ASP.NET). 

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

Wenn die Seite gebunden ist:

  • ko-unboundKlasse wird von der Seite entfernt (anfänglich mit classAttribut hinzugefügt ).
  • ko-bound Klasse wird der Seite hinzugefügt.

Dann kann ich auf einer Seite, auf der unerwünschter Inhalt ein Problem darstellt, das CSS anpassen, um Dinge basierend auf diesen beiden Klassen ein- oder auszublenden. Ich verwende diese Technik auch, um ein Ladebild anzuzeigen oder einem Element eine Mindesthöhe aufzuerlegen.

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

Während des Testens füge ich beim Anwenden von Bindungen eine Zeitüberschreitung hinzu, damit ich den Blitz sehen kann.

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

 }, 300);
Simon_Weaver
quelle
Dies ist eine relativ schöne, vielversprechende Lösung, obwohl sie als wiederverwendbare Knockout-Bindung besser geeignet wäre. Wir müssten jedoch sicherstellen, dass es sich um die erste bewertete Bindung handelt.
John Zabroski
1

Wickeln Sie Ihr HTML in so etwas ein -

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

Fügen Sie dann in Ihrem JavaScript die folgende jquery-Zeile hinzu, nachdem Sie die Bindung angewendet haben -

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

Dies ist die einfachste Methode, die ich gefunden habe und die funktioniert. Sie könnten dies mit einigen Knockout-Bindungen tun, verlieren jedoch das garantierte Timing, da Sie nicht steuern können, ob Auftragsbindungen ausgeführt werden.

photo_tom
quelle
0

Eine andere Lösung, die ich hier gefunden habe

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

Dies hat den Vorteil - oder Nachteil, je nach Ihren Anforderungen -, dass Platz für den versteckten Inhalt reserviert wird. Die Seite "springt" nicht, wenn die Bindungen angewendet werden.

Klaus Ole Kristiansen
quelle