Cách tốt nhất để ẩn màn hình trong khi các ràng buộc js loại trực tiếp đang được xây dựng là gì?

Tôi là một người hâm mộ knockoutjs lớn. Tôi sử dụng nó cho tất cả các phát triển web của tôi bây giờ và chỉ đơn giản là yêu thích nó. Một điều mà tôi không thể tìm ra là làm thế nào để ẩn giao diện người dùng trong khi các ràng buộc knockoutjs đang được xây dựng.

Ví dụ: tôi có một giao diện người dùng rất mạnh mẽ với rất nhiều mẫu được sử dụng trên trang của tôi. Vấn đề mà tôi nhận thấy là khi người dùng truy cập trang lần đầu tiên, họ sẽ thấy tất cả các mẫu của tôi trong tích tắc trước khi các ràng buộc bắt đầu và ẩn chúng đi.

Cách tốt nhất để khắc phục sự cố này là gì? Tôi đã thử sử dụng các lớp trợ giúp để ẩn chúng, nhưng sau đó các mẫu không thể được hiển thị bằng cách sử dụng các liên kết 'hiển thị' và 'nếu' trừ khi tôi xóa tham chiếu lớp trợ giúp (tức là ui-helper-hidden).

Có một số chiến lược mà bạn có thể sử dụng ở đây.

-Một là đặt tất cả nội dung thực tế của bạn vào các mẫu nằm trong các thẻ script (hoạt động tốt với các mẫu gốc). Trong mẫu, bạn có thể sử dụng ràng buộc luồng điều khiển. Điều này sẽ giống như:

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

- Một lựa chọn khác là sử dụng style="display: none"trên phần tử vùng chứa cùng với một visibleràng buộc có thể được liên kết với một thứ loadedcó thể quan sát được, nơi bạn thay đổi có thể quan sát thành truesau khi các ràng buộc đã được áp dụng.

Tôi chỉ đang google cho điều này và sau khi sử dụng cách có thể quan sát được, tôi đã nghĩ ra một cách tiếp cận khác:

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

Bạn không cần một cái có thể quan sát được, cái có thể nhìn thấy sẽ luôn đánh giá là true sau khi việc liên kết dữ liệu được thực hiện.

Đây là phương pháp chỉ dành cho CSS nếu bạn lo lắng về các tiện ích con chưa được phân loại hiển thị trước liên kết triển khai MVVM .

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

Tôi chưa thử nghiệm nó trên tất cả các vật dụng Kendo, nhưng nó có vẻ hiệu quả với hầu hết mọi người.

Đây là cách tiếp cận thay thế bằng cách sử dụng các lớp cho "ẩn và" hiển thị "thay vì một kiểu nội tuyến. Thêm một lớp" ẩn "vào phần tử cần ẩn cho đến khi tải nội dung và thêm liên kết dữ liệu" css "để làm cho nó được hiển thị khi nó bị ràng buộc.

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

</div>

Các lớp 'ẩn' và 'hiển thị' đã được định nghĩa trong Bootstrap.

Nếu Bootstrap không được sử dụng, CSS có thể được định nghĩa là:

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

Thứ tự quan trọng. Lớp "ẩn" nên được định nghĩa trước "hiển thị".