Knockout JS：阻止div綁定到可見：從屏幕上閃爍

我正在單頁面上應用程序有一堆隱藏的div，綁定（或綁定？）到KnockoutJS與visible:。當頁面加載時，它們在屏幕上瞬間閃現。我試圖將我的JS移動到<head></head>，但這沒有效果，所以在頁面底部加載JS並不是造成它的原因。Knockout JS：阻止div綁定到可見：從屏幕上閃爍

不幸的是，visible:綁定不會傳播到CSS屬性display，所以我不能在頁面加載使用display: none;，或visible:不會在所有的工作。除非......我加載頁面display: none;，然後在第一次將div顯示給用戶時進行更改。

但是，有沒有一種更優雅的方式來實現這一目標？

來源

2012-10-08 solefald

可能重複[什麼是隱藏，而淘汰賽的js屏幕的最佳方法綁定正在構建？]（http://stackoverflow.com/questions/9532595/what-is-the-best-way-to-hide-the-screen-while-knockout-js-bindings-are-being-bui ） –

WTH KnockoutJS，我解決這個問題，通過定義稱爲hidden與display:none CSS類，然後我會添加這個類，並結合閃爍的容器：

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

來源

2012-10-08 05:31:42 Tuan

這就是*什麼我需要！謝謝！ – solefald

您先生是救世主 –

他們說的^。謝謝你這個傑出的答案！ –

我解決了這個由把我的「華麗的「內容，並在變量由另一個虛擬元素設置時使用ko的虛擬元素加載模板。

例如：

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

所以當MYVARIABLE設置，腳本容器的內容將取代模板虛擬要素的投入。使用這種方法，您看不到任何閃爍的內容:-)

來源

2013-04-15 15:05:11 Milaan

這有沒有放置顯示的獎金：沒有一切（當別人刪除數據綁定，他們可能不記得刪除顯示：無 – roo2

偉大的答案Milaan – pimbrouwers

我最終編寫了一個自定義綁定來代替默認的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); 
     } 
    } 
}

然後一些CSS處理的知名度

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

用法是一樣的visible結合的

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

來源

2016-07-08 08:48:35

Knockout JS：阻止div綁定到可見：從屏幕上閃爍

回答

相關問題