Knockout JS: Stop divs binded to visible: nhấp nháy trên màn hình

Tôi đang làm việc trên một ứng dụng đơn lẻ có một loạt các div ẩn, được liên kết (hoặc bị ràng buộc?) Với KnockoutJS với visible:. Khi tải trang, tất cả chúng đều nhấp nháy trên màn hình. Tôi đã thử di chuyển JS của tôi vào <head></head>, nhưng điều đó không có hiệu lực, do đó, tải JS ở dưới cùng của trang không phải là những gì gây ra nó.Knockout JS: Stop divs binded to visible: nhấp nháy trên màn hình

Thật không may, visible: ràng buộc không tuyên truyền để CSS display thuộc tính, vì vậy tôi không thể sử dụng display: none; trên tải trang, hoặc visible: sẽ không làm việc ở tất cả. Trừ khi ... tôi tải trang với display: none; và sau đó thay đổi nó lần đầu tiên tôi hiển thị div cho người dùng.

Nhưng có cách nào thanh lịch hơn để đạt được điều này không?

Nguồn

2012-10-08 solefald

thể trùng lặp của [cách tốt nhất để ẩn màn hình trong khi loại trực tiếp js là gì bindings đang được xây dựng?] (http://stackoverflow.com/questions/9532595/what-is-the-best-way-to-hide-the-screen-while-knockout-js-bindings-are-being-bui) –

Wth KnockoutJS, tôi làm việc xung quanh vấn đề này bằng cách định nghĩa một lớp CSS gọi hidden với display:none, sau đó tôi sẽ thêm lớp này và bắt buộc đối với container nhấp nháy:

class="hidden" data-bind="css: { hidden: false }"

Nguồn

2012-10-08 05:31:42 Tuan

Đó là * chính xác * những gì Tôi cần! Cảm ơn bạn! – solefald

Bạn thưa ông là một vị cứu tinh –

Những gì họ nói ^. Cảm ơn câu trả lời tuyệt vời này! –

tôi giải quyết này bằng cách đặt của tôi " hào nhoáng "nội dung trong một mẫu kịch bản lệnh và sử dụng các phần tử ảo của ko để tải mẫu khi biến được thiết lập bởi một phần tử ảo khác.

Ví dụ:

<!-- ko if: myVariable --> 
<!-- ko template: { name: 'myTemplate' } --><!-- /ko --> 
<script type="text/html" id="myTemplate"> 
    <ul data-bind="foreach: blah..."> 
     <li></li> 
    </ul> 
</script> 
<!-- /ko -->

Vì vậy, khi myVariable được thiết lập, nội dung của container kịch bản sẽ được đưa vào vị trí của các yếu tố ảo mẫu. Với phương pháp này bạn không thấy bất kỳ nội dung nhấp nháy nào :-)

Nguồn

2013-04-15 15:05:11 Milaan

điều này có phần thưởng không hiển thị: không hiển thị trên mọi thứ (khi người khác loại bỏ ràng buộc dữ liệu mà họ có thể không nhớ xóa màn hình: none – roo2

Câu trả lời tuyệt vời Milaan – pimbrouwers

Tôi đã kết thúc bằng cách viết một ràng buộc tùy chỉnh để sử dụng thay vì mặc định visible.

function isHidden(el) { 
    var style; 

    style = window.getComputedStyle(el); 

    return (style.display === 'none') 
} 

ko.bindingHandlers['cssVisible'] = { 
    'update': function (element, valueAccessor) { 
     var value, 
      isCurrentlyVisible; 

     value = ko.utils.unwrapObservable(valueAccessor()); 
     isCurrentlyVisible = !isHidden(element); 

     if (value && !isCurrentlyVisible) { 
      ko.utils.toggleDomNodeCssClass(element, 'ko-visible', true); 
     } 
     else if ((!value) && isCurrentlyVisible) { 
      ko.utils.toggleDomNodeCssClass(element, 'ko-visible', false); 
     } 
    } 
}

Sau đó, một số CSS để xử lý tầm nhìn

[data-bind*="cssVisible"]:not(.ko-visible) { 
    display: none; 
}

Cách sử dụng tương tự như các visible ràng buộc

<div data-bind="cssVisible: true"></div>

Nguồn

2016-07-08 08:48:35

Knockout JS: Stop divs binded to visible: nhấp nháy trên màn hình

Trả lời

Các vấn đề liên quan