녹아웃 바인딩이 실행되기 전에 HTML이 표시되는 것을 방지하는 방법

녹아웃 바인딩이 실행되기 전에 HTML이 표시되는 것을 방지하는 방법

---

내 Html에서 다음 녹아웃 스크립트를 사용하고 있습니다.

<!-- kno ifnot: bla -->

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

<!-- /ko -->

내가 가진 문제는 바인딩이 실행되기 전에이 행이 1 ~ 2 초 동안 표시된다는 것입니다.

이런 일이 발생하지 않도록하려면 어떻게해야합니까?

---

여기에 간단한 트릭이 있습니다. 처음에는 루트 요소를 숨기고 보이는 바인딩을 true로 설정하기 만하면됩니다.

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

렌더링 될 때 녹아웃이 수행되기 전에 처음에는 숨겨집니다. 바인딩이 적용되면 녹아웃이 스타일을 무시하고 보이게 만듭니다.

---

또는보기를 스크립트 블록에 넣고 템플릿을 통해 인스턴스화 할 수 있습니다. 스크립트 블록은 렌더링되지 않지만 녹아웃이 템플릿을 렌더링 할 때 표시됩니다.

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

---

원하는 동작은 페이지마다 다르기 때문에 레이아웃 / 템플릿 파일 (ASP.NET)에서 수행하는 작업입니다.

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

페이지가 바인딩 된 경우 :

• ko-unbound클래스가 페이지에서 제거됩니다 (처음에는 class속성으로 추가됨 ).
• ko-bound 클래스가 페이지에 추가됩니다.

그런 다음 원치 않는 콘텐츠가 문제가되는 페이지에서이 두 클래스를 기반으로 사물을 표시하거나 숨기도록 CSS를 사용자 지정할 수 있습니다. 또한이 기술을 사용하여 '로딩'이미지를 표시하거나 요소에 최소 높이를 부과합니다.

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

테스트 중에 바인딩을 적용 할 때 플래시를 볼 수 있도록 타임 아웃을 추가합니다.

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

 }, 300);

---

다음과 같이 HTML을 감싸십시오.

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

그런 다음 JavaScript에서 바인딩 적용 뒤에 다음 jquery 줄을 추가하십시오.

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

이것은 내가 찾은 가장 간단한 방법입니다. 일부 녹아웃 바인딩으로이를 수행 할 수 있지만 순서 바인딩이 실행되는 것을 제어 할 수 없기 때문에 보장 된 타이밍을 잃게됩니다.

---

여기 에서 찾은 또 다른 솔루션

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

This has the advantage - or disadvantage, depending on your needs - that space will be reserved for the hidden content. The page will not "jump" when the bindings are applied.

참고URL : https://stackoverflow.com/questions/13168767/how-to-prevent-html-showing-before-knockout-binding-is-executed