風格綁定依賴於後來的HTML失敗

所以，我想根據後代li元素的寬度設置left定位ul。這個想法是創建一個移動導航，當導航欄中活動的li改變時，它會「幻燈片」。風格綁定依賴於後來的HTML失敗

我想使用KO foreach循環渲染這些lis。唯一的問題是，在初始頁面加載時，我的樣式綁定查找的選擇器丟失。這在第二次調用函數時工作，當「活動」li變化並且它正在查找的li存在時。

我在這裏使用jQuery，但我確定有更多的「KO方式」來做到這一點。

謝謝！

標記：打電話結合

<nav class="bc-wizard__nav mb2"> 
    <ul class="bc-wizard__nav-list" data-bind="style: {left: listPosition}"> 

     <!-- ko foreach: navSections --> 
      <li class="bc-wizard__nav-step" 
       data-bind="attr: {id: 'nav_section_' + id}, css: $parent.isStepActive(id)"> 
       <span data-bind="html: title"></span> 
      </li> 
     <!-- /ko --> 

    </ul> 
</nav>

淘汰賽功能：

self.listPosition = ko.pureComputed(function() { 

    // Won't find this on initial load 
    var $currentSection = $j('#nav_section_' + self.activeSection()); 

    var currentPositionInList = $currentSection.position().left; 
    var negativeOffset = (currentPositionInList*-1); 

    // Moves list horizontally 
    return negativeOffset + 'px'; 
});

來源

2015-10-29 xEmptyCanx

你不能延遲計算的執行，直到html被渲染，所以你得到有效的數據，即使用計算的'throttle'。 –

我不知道這個功能！它看起來很有用，但在這裏並沒有真正的幫助。選擇器仍然沒有找到。這似乎應該工作，但這在文檔中使我認爲，計算_runs_立即，它只是不會告訴其他所有事情，直到延遲已經過去。「寫入觀察值不會延遲...對於可寫的計算觀察值，這意味着寫入函數總是立即運行。」 ...「所有更改通知都會延遲。」 – xEmptyCanx

嘗試爲'lis'創建一個模板並使用'afterRender'選項，該選項應該可以在onload但稍後我不確定 –

我想在這裏的幾個方法，其中包括KO模板afterRender選項，節流閥事件在KO計算，試圖基本上延遲功能，直到dom呈現。

這些選項都不起作用，但我有一個單獨的功能，即將一個類添加到活動的li。當這個函數觸發時，我只是調用了函數調整ul的位置。

不幸的是，一個非常具體的解決方案，但你去。

來源

2015-10-29 17:11:13 xEmptyCanx

風格綁定依賴於後來的HTML失敗

回答

相關問題