녹아웃 js 바인딩이 빌드되는 동안 화면을 숨기는 가장 좋은 방법은 무엇입니까?

녹아웃 js 바인딩이 빌드되는 동안 화면을 숨기는 가장 좋은 방법은 무엇입니까?

---

나는 거대한 knockoutjs 팬입니다. 나는 지금 내 모든 웹 개발에 그것을 사용하고 단순히 그것을 좋아합니다. 내가 알아낼 수 없었던 한 가지는 knockoutjs 바인딩이 빌드되는 동안 UI를 숨기는 방법입니다.

예를 들어, 내 페이지에 많은 템플릿이 사용되는 매우 강력한 사용자 인터페이스가 있습니다. 내가 알아 차린 문제는 사용자가 페이지를 처음 방문 할 때 바인딩이 시작되고 숨겨지기 전에 잠시 동안 내 모든 템플릿을 볼 수 있다는 것입니다.

이 문제를 해결하는 가장 좋은 방법은 무엇입니까? 헬퍼 클래스를 사용하여 숨기려고 시도했지만 헬퍼 클래스 참조 (예 : ui-helper-hidden)를 제거하지 않는 한 'visible'및 'if'바인딩을 사용하여 템플릿을 표시 할 수 없습니다.

---

여기에서 사용할 수있는 몇 가지 전략이 있습니다.

-하나는 모든 실제 콘텐츠를 스크립트 태그에있는 템플릿에 배치하는 것입니다 (기본 템플릿에서 잘 작동 함). 그런 다음 템플릿 내에서 제어 흐름 바인딩을 사용할 수 있습니다. 이것은 다음과 같습니다.

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

-또 다른 선택은 바인딩이 적용된 후 Observable을 변경하는 Observable에 연결할 수 style="display: none"있는 visible바인딩 과 함께 컨테이너 요소에 사용 하는 것 입니다.loadedtrue

---

나는 단지 이것을 위해 googleing하고 있었고 관찰 가능한 방법을 사용한 후에 다른 접근 방식을 생각했습니다.

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

Observable이 필요하지 않으며 데이터 바인딩이 완료되면 visible은 항상 true로 평가됩니다.

---

MVVM 구현에 대한 바인드 전에 나타나는 스타일이 지정되지 않은 위젯이 걱정되는 경우 CSS 전용 방법이 있습니다 .

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

모든 Kendo 위젯에서 테스트하지는 않았지만 대부분의 경우 작동하는 것 같습니다.

---

다음은 인라인 스타일 대신 "hide 및"show "에 대한 클래스를 사용하는 대체 방법입니다. 콘텐츠가로드 될 때까지 숨겨야하는 요소에"hide "클래스를 추가하고"css "데이터 바인딩을 추가하여 만듭니다. 바인딩 될 때 표시됩니다.

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

</div>

'hide'및 'show'클래스는 이미 Bootstrap에 정의되어 있습니다.

부트 스트랩을 사용하지 않는 경우 CSS를 다음과 같이 정의 할 수 있습니다.

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

순서가 중요합니다. "숨기기"클래스는 "표시"전에 정의해야합니다.

참고 URL : https://stackoverflow.com/questions/9532595/what-is-the-best-way-to-hide-the-screen-while-knockout-js-bindings-are-being-bui