javascript - 使用 KnockoutJS，在 foreach 中呈现后如何滚动到组件？

Question

我有deferred updates启用。

我有两个组件。

第一个是列表，它被简单地实现为带有 foreach 数据绑定(bind)的 div:

<div class="list-people" data-bind="foreach: { data: people, afterRender: afterRenderPeople }">
    <!-- ko component: { name: "listitem-person", params: { person: $data } } --><!-- /ko -->
</div>

第二个是列表项:

<div class="listitem-person">
    <span data-bind="text: Name"></span>
</div>

afterRender 为 foreach 中的每个项目调用.

我的 afterRenderPerson功能很简单:

public afterRenderPerson = (elements: any[], data: Person) => {
    let top = $(element[0]).offset().top;

    scrollTo(top);
};

问题是当afterRenderPerson称为子组件 listitem-person尚未呈现。

表示传递给afterRenderPerson的元素数组有 4 个节点:

1. 包含 \n 的文本节点即换行。
2. 包含 <!-- ko component: { name: "listitem-person", params: { person: $data } } --> 的注释节点.
3. 包含 <!-- /ko --> 的注释节点.
4. 包含 \n 的文本节点即换行。

这些都不适合获得 top像素，即使它们是，正在呈现的子组件也可能会影响该位置的布局，从而改变我尝试获取的像素值。

Answer 1

不幸的是，documentation for foreach 似乎没有考虑组件的延迟性质。

If you need to run some further custom logic on the generated DOM elements, you can use any of the afterRender/afterAdd/beforeRemove/beforeMove/afterMove callbacks described below.

Note: These callbacks are only intended for triggering animations related to changes in a list.

我遇到过两种变通办法，都不是很好，但这就是为什么它们是变通办法而不是解决方案!

user3297291 在评论中提出了创建放置在子组件上的 scrollTo 绑定(bind)的建议。

Only workaround I can think of is to define a custom scrollTo binding and include it in the component template... Quite easy to implement, but still feels hacky and makes your inner component harder to reuse. You might also want to track this feature request – user3297291

这只是一个 custom binding它根据提供给它的值有条件地执行一些代码。

在将 HTML 插入 DOM 之前，不会调用绑定(bind)。这并不完美，因为稍后对 DOM 的更改可能会影响插入的 HTML 元素的位置，但它应该适用于许多情况。

虽然我不是很热衷于必须修改子组件，但我更喜欢将其封装在父组件中的解决方案。

第二种解决方法是通过其 ID 检查子组件 HTML 元素是否存在于 DOM 中。因为我不知道它们什么时候会出现，所以这必须在某种循环中完成。

while 循环不适合，因为它会在“紧密”循环中过于频繁地运行检查，因此使用 setTimeout。

setTimeout 是一个可怕的 hack，使用它让我觉得很脏，但它确实适用于这种情况。

private _scrollToOffset = -100;
private _detectScrollToDelayInMS = 200;
private _detectScrollToCountMax = 40;
private _detectScrollToCount = 0;

private _detectScrollTo = (scrollToContainerSelector: string, scrollToChildSelector: string) => {
    //AJ: If we've tried too many times then give up.
    if (this._detectScrollToCount >= this._detectScrollToCountMax)
        return;

    setTimeout(() => {
        let foundElements = $(scrollToChildSelector);

        if (foundElements.length > 0) {
            //AJ: Scroll to it
            $(scrollToContainerSelector).animate({ scrollTop: foundElements.offset().top + this._scrollToOffset });

            //AJ: Give it a highlight
            foundElements.addClass("highlight");
        } else {
            //AJ: Try again
            this._detectScrollTo(scrollToContainerSelector, scrollToChildSelector);
        }
    }, this._detectScrollToDelayInMS);

    this._detectScrollToCount++;
};

我确保对其运行时间设置了限制，因此如果出现问题，它不会永远循环。

可能应该注意到这个问题有一个“终极”解决方案，那就是 TKO，又名 Knockout 4。

但这还不是“生产就绪”。

How to know when a component has finished updating DOM?

brianmhunt commented on Jun 20

knockout/tko (ko 4 candidate) latest master branch has this.

More specifically, the applyBindings family of functions now return a Promise that resolves when sub-children (including asynchronous ones) are bound.

The API isn't set or documented yet, but the bones have been set up.