it-swarm.com.de

Was ist der beste Weg, um den Bildschirm auszublenden, während Knockout-Bindungen hergestellt werden?

Ich bin ein großer Knockoutjs-Fan. Ich verwende es jetzt für meine gesamte Webentwicklung und liebe es einfach. Eine Sache, die ich nicht herausfinden konnte, ist, wie man die Benutzeroberfläche verdeckt, während die Knockoutjs-Bindungen gebaut werden.

Ich habe zum Beispiel eine sehr robuste Benutzeroberfläche, auf deren Seite viele Vorlagen verwendet werden. Das Problem, das mir aufgefallen ist, ist, dass wenn der Benutzer die Seite zum ersten Mal besucht, alle meine Vorlagen für einen Bruchteil einer Sekunde angezeigt werden, bevor die Bindungen einrasten und sie ausblenden.

Was ist der beste Weg, um dieses Problem zu beheben? Ich habe versucht, Helper-Klassen zu verwenden, um sie auszublenden, aber dann können die Vorlagen nicht mit den Bindungen 'visible' und 'if' angezeigt werden, es sei denn, ich entferne die Helper-Klassenreferenz (dh. Ui-helper-hidden).

76
Luc

Es gibt einige Strategien, die Sie hier anwenden können. 

-One ist es, den gesamten Inhalt in Vorlagen zu legen, die in Skript-Tags enthalten sind (funktioniert mit nativen Vorlagen gut). Innerhalb der Vorlage können Sie dann Kontrollflussbindungen verwenden. Das wäre wie:

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

Sie können auch style="display: none" für das Containerelement zusammen mit einer visible-Bindung verwenden, die an ein loaded-Observable gebunden werden kann, bei dem Sie das Observable in true ändern, nachdem die Bindungen angewendet wurden.

70
RP Niemeyer

Ich googelte gerade dafür und nachdem ich den beobachtbaren Weg eingeschlagen hatte, dachte ich an einen anderen Ansatz:

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

Sie benötigen kein Observable, das Sichtbare wird immer als wahr ausgewertet, sobald die Datenbindung abgeschlossen ist.

191
Jason More

Ist hier nur eine CSS-Methode, wenn Sie befürchten, dass nicht gestylte Widgets vor dem Binden für MVVM-Implementierungen angezeigt werden.

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

Ich habe es nicht auf allen Kendo-Widgets getestet, aber es scheint für die meisten zu funktionieren.

0
Sunny Patel

Hier ist ein alternativer Ansatz, bei dem Klassen für "hide and" show "anstelle eines Inline-Stils verwendet werden: Fügen Sie dem Element, das bis zum Laden des Inhalts ausgeblendet werden soll, eine" hide "-Klasse hinzu und fügen Sie eine" css "-Datenbindung hinzu, um es zu erstellen gezeigt werden, wenn es gebunden ist.

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

</div>

Die Klassen 'hide' und 'show' sind bereits in Bootstrap definiert.

Wenn Bootstrap nicht verwendet wird, kann das CSS wie folgt definiert werden:

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

Die Reihenfolge ist wichtig. Die "hide" -Klasse sollte vor "show" definiert werden.

0
M Y K