Question

所以，我正在尝试根据后代li元素的宽度设置left ul的定位。我们的想法是创建一个“滑动”的移动导航，因为导航栏中的活动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>

绑定中调用的Knockout函数：

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

Answer 1

我在这里尝试了几种方法，包括KO模板上的afterRender选项，以及计算的KO中的节流事件，以尝试基本上延迟函数直到渲染dom。

这些选项都不起作用，但我有一个单独的函数，即在活动li中添加一个类。当这个函数触发时，我刚刚调用函数调整ul的位置。

遗憾的是，这是一个非常具体的解决方案，但是你去了。

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

1 个答案: