Làm thế nào để ngăn chặn Html cho thấy trước khi loại trực tiếp ràng buộc được thực hiện

Question

Tôi đang sử dụng các kịch bản loại trực tiếp sau trong Html tôi:

<!-- kno ifnot: bla --> 

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

<!-- /ko --> 

Tôi có vấn đề là trước khi các ràng buộc được thực hiện hàng này sẽ hiển thị trong một giây hoặc hai.

Làm cách nào để ngăn điều này xảy ra?

Answer 1

Đây là một mẹo đơn giản. Chỉ cần làm cho phần tử gốc của bạn ban đầu bị ẩn và thiết lập ràng buộc có thể nhìn thấy thành true.

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

Khi nó được hiển thị, trước khi loại trực tiếp thực hiện, nó sẽ bị ẩn ban đầu. Khi các ràng buộc được áp dụng, knockout sẽ ghi đè lên phong cách và làm cho nó có thể nhìn thấy.

---

Ngoài ra, bạn có thể đưa chế độ xem của mình vào khối tập lệnh và khởi tạo nó qua mẫu. Các khối tập lệnh sẽ không được hiển thị nhưng sẽ hiển thị khi loại trực tiếp hiển thị mẫu.

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

Answer 2

Quấn html của bạn trong một cái gì đó như thế này -

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

Sau đó, trong JavaScript, hãy thêm dòng jquery sau đây sau khi bạn áp dụng ràng buộc -

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

Đây là phương pháp đơn giản nhất mà tôi đã tìm thấy hoạt động. Bạn có thể làm điều này với một số ràng buộc knockout, nhưng bạn mất thời gian đảm bảo bởi vì bạn không thể kiểm soát các ràng buộc lệnh được thực hiện.

Answer 3

Vì hành vi bạn muốn thường thay đổi từ trang này sang trang khác - đây là những gì tôi đang làm trong tệp bố cục/mẫu của tôi (ASP.NET).

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

Khi trang web được ràng buộc:

• ko-unbound lớp được xóa khỏi trang (ban đầu thêm với class thuộc tính).
• ko-bound lớp học được thêm vào trang.

Sau đó, trong một trang có nội dung không mong muốn, tôi có thể tùy chỉnh css để hiển thị hoặc ẩn mọi thứ dựa trên hai lớp này. Tôi cũng sử dụng kỹ thuật này để hiển thị hình ảnh 'tải' hoặc có thể áp đặt chiều cao tối thiểu cho một phần tử.

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

Trong khi thử nghiệm, khi áp dụng các ràng buộc Tôi thêm thời gian chờ để tôi có thể nhìn thấy flash.

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

}, 300); 

Answer 4

Một giải pháp, mà tôi tìm thấy here

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

này có lợi thế - hoặc bất lợi, tùy thuộc vào nhu cầu của bạn - không gian đó sẽ được dành riêng cho các nội dung ẩn. Trang sẽ không "nhảy" khi các ràng buộc được áp dụng.