Jquery 依赖于后期HTML的样式绑定失败

因此，我试图根据子元素li的宽度设置

ul

的

left

定位。其想法是创建一个移动导航，当导航栏中的活动li发生变化时“滑动”

我正在尝试使用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>

---

我在这里尝试了几种方法，包括KO模板上的

afterRender

选项，以及在KO计算中限制事件，以尝试并基本上延迟函数，直到dom呈现

这些选项都不起作用，但我有一个单独的函数，它向活动的

li

添加一个类。我只是在调用函数时调整了

ul

的位置

---

不幸的是，这是一个非常具体的解决方案，但是你可以这样做。

你不能延迟计算的执行直到html被呈现，这样你就可以使用computed获得有效的数据，例如

throttle

。我不知道这个功能！它看起来很有用，但在这里没有真正的帮助。仍然找不到选择器。看起来这应该行得通，但文档中的这一点让我觉得计算会立即运行，它只是在延迟过去之前不会告诉其他一切。“对可观察对象的写入不会延迟…对于可写入的计算可观察对象，这意味着写入函数总是立即运行。”。。。“所有更改通知都已延迟。”请尝试为

lis

创建模板，并使用

afterRender

选项，该选项应在加载时起作用，但稍后我不确定

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';
});