Knockout JS: Stopp divs binded zu sichtbar: von blinkend auf dem Bildschirm

Ich arbeite auf einer einzigen Seite Anwendungen, die eine Reihe von versteckten divs hat, binded (oder ist es gebunden?) Zu KnockoutJS mit visible:. Wenn die Seite geladen wird, blinken alle momentan auf dem Bildschirm. Ich habe versucht, meine JS in die <head></head> zu bewegen, aber das hatte keine Wirkung, so Laden JS am unteren Rand der Seite ist nicht, was es verursacht.Knockout JS: Stopp divs binded zu sichtbar: von blinkend auf dem Bildschirm

Leider visible: Bindung propagiert nicht auf CSS display Attribut, also kann ich nicht display: none; beim Laden der Seite verwenden oder visible: wird nicht funktionieren. Es sei denn ... Ich lade die Seite mit display: none; und ändere es dann, wenn ich das div zum ersten Mal einem Benutzer zeige.

Aber gibt es einen eleganteren Weg, dies zu erreichen?

Quelle

2012-10-08 solefald

möglich Duplikat [zu handhaben Was ist der beste Weg, um den Bildschirm, während Knockout js zu verstecken Bindings werden gebaut?] (http://stackoverflow.com/questions/9532595/what-ist-the-best-way-to-hide-the-screen-while-knockout-js-bindings-are-being-bui) –

Wth KnockoutJS, ich dieses Problem umgehen, indem Sie eine CSS-Klasse definieren hidden mit display:none genannt, dann werde ich diese Klasse hinzufügen, und die Bindung an den blinkenden Behälter:

class="hidden" data-bind="css: { hidden: false }"

Quelle

2012-10-08 05:31:42 Tuan

Das ist * genau * was Ich brauchte! Vielen Dank! – solefald

Sie sind ein Retter –

Was sie sagten ^. Danke für diese brillante Antwort! –

Ich löste dies meine, indem " flashy "Inhalt in einer Skriptvorlage und verwenden Sie die virtuellen Elemente von ko, um die Vorlage zu laden, wenn die Variable von einem anderen virtuellen Element gesetzt wird.

Zum Beispiel:

<!-- ko if: myVariable --> 
<!-- ko template: { name: 'myTemplate' } --><!-- /ko --> 
<script type="text/html" id="myTemplate"> 
    <ul data-bind="foreach: blah..."> 
     <li></li> 
    </ul> 
</script> 
<!-- /ko -->

Also, wenn myVariable gesetzt ist, wird der Inhalt des Skripts Containers anstelle der Vorlage virtuellen Elements gesetzt werden. Mit dieser Methode sehen Sie keinen blinkenden Inhalt :-)

Quelle

2013-04-15 15:05:11 Milaan

Dies hat den Vorteil, keine Anzeige zu machen: keine auf alles (wenn jemand anderes die Datenbindung entfernt, erinnern sie sich vielleicht nicht daran, die Anzeige zu entfernen: keine – roo2

GREAT antwort Milaan – pimbrouwers

Ich habe am Ende eine benutzerdefinierte Bindung anstelle der Standard visible zu schreiben.

function isHidden(el) { 
    var style; 

    style = window.getComputedStyle(el); 

    return (style.display === 'none') 
} 

ko.bindingHandlers['cssVisible'] = { 
    'update': function (element, valueAccessor) { 
     var value, 
      isCurrentlyVisible; 

     value = ko.utils.unwrapObservable(valueAccessor()); 
     isCurrentlyVisible = !isHidden(element); 

     if (value && !isCurrentlyVisible) { 
      ko.utils.toggleDomNodeCssClass(element, 'ko-visible', true); 
     } 
     else if ((!value) && isCurrentlyVisible) { 
      ko.utils.toggleDomNodeCssClass(element, 'ko-visible', false); 
     } 
    } 
}

Dann einige CSS Sichtbarkeit

[data-bind*="cssVisible"]:not(.ko-visible) { 
    display: none; 
}

Verwendung ist die gleiche wie die visible Bindung

<div data-bind="cssVisible: true"></div>

Quelle

2016-07-08 08:48:35

Knockout JS: Stopp divs binded zu sichtbar: von blinkend auf dem Bildschirm

Antwort

Verwandte Themen