Jak zapobiegać HTML pokazujący przed nokaut Wiązanie jest wykonywany

Question

Używam następujące skrypty pucharowej w moim HTML:

<!-- kno ifnot: bla --> 

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

<!-- /ko --> 

Problem mam to, że zanim wiązania są wykonywane w tym wierszu pokaże na sekundę lub dwa.

Jak mogę temu zapobiec?

Answer 1

Oto prosta sztuczka. Po prostu ustaw początkowo element główny i ustaw widoczne powiązanie na true.

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

W miarę renderowania, zanim nokaut wykona swoje zadanie, będzie on początkowo ukryty. Po zastosowaniu powiązań, nokaut będzie nadpisywać styl i sprawi, że będzie widoczny.

---

Alternatywnie możesz rzucić widok na blok skryptu i utworzyć jego instancję za pomocą szablonu. Bloki skryptów nie zostaną wyrenderowane, ale będą widoczne, gdy nokaut wyświetli szablon.

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

Answer 2

Owiń html w coś takiego -

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

Następnie w JavaScripcie, dodaj następującą linię jquery Po zastosować wiązania -

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

Jest to najprostsza metoda, która Znalazłem to działa. Mógłbyś to zrobić z niektórymi powiązaniami typu "knockout", ale tracisz gwarantowane terminy, ponieważ nie możesz kontrolować wykonywania powiązań.

Answer 3

Ponieważ zachowanie chcesz często waha się od strony do strony - to, co robię w moim układzie pliku/szablonu (ASP.NET).

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

Gdy strona jest związana:

• ko-unbound klasy są usunięte ze strony (początkowo dodanej z atrybutem class).
• ko-bound klasa zostanie dodana do strony.

Następnie na stronie, na której niepożądane treści stanowią problem, mogę dostosować ustawienia css do pokazywania lub ukrywania elementów na podstawie tych dwóch klas. Używam również tej techniki, aby pokazać "ładowanie" obrazu lub nałożyć minimalną wysokość elementu.

Podczas testowania, przy stosowaniu wiązań dodam limit czasu, dzięki czemu mogę zobaczyć lampę błyskową.

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

}, 300); 

Answer 4

Innym rozwiązaniem, które znalazłem here

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

Ma to tę zaletę lub wadę - w zależności od potrzeb - że miejsce zostanie zarezerwowane dla ukrytych treści. Strona nie "przeskoczy", gdy zostaną zastosowane wiązania.