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

Question

我启用了deferred updates。

我有两个组件。

第一个是列表，简单实现为带有foreach数据绑定的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>

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

我的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 似乎没有考虑到组件的延迟特性。

如果您需要在生成的 DOM 元素上运行一些进一步的自定义逻辑，您可以使用下面描述的任何 afterRender/afterAdd/beforeRemove/beforeMove/afterMove 回调。

注意：这些回调仅用于触发与列表更改相关的动画。

我遇到了两种解决方法，但都不是很好，但这就是为什么它们是解决方法而不是解决方案！

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

我能想到的唯一解决方法是定义一个自定义的 scrollTo 绑定并将其包含在组件模板中......很容易实现，但仍然感觉很hacky并且使您的内部组件更难重用。您可能还想跟踪这个feature request – user3297291

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

在将 HTML 插入 DOM 之前，不会调用绑定。这并不完美，因为以后对 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，AKA Knockout 4。

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

How to know when a component has finished updating DOM?

brianmhunt 于 6 月 20 日发表评论

knockout/tko（ko 4 候选）最新的master分支有这个。

更具体地说，applyBindings 系列函数现在返回一个 Promise，该 Promise 在子子项（包括异步子项）被绑定时解析。

API 尚未设置或记录，但骨骼已设置。

Answer 2

这似乎有效。我制作了一个绑定处理程序，它在其init 中运行回调（它使用tasks.schedule 来允许渲染周期）。在父级附加它不会及时渲染子级，但将它附加到虚拟元素会。

我将它设计为与签名类似afterRender 的函数一起使用。因为它对每个元素都运行，所以回调函数必须测试数据是否是第一个元素。

ko.options.deferUpdates = true;

ko.bindingHandlers.notify = {
  init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
    // Make it asynchronous, to allow Knockout to render the child component
    ko.tasks.schedule(() => {
      const onMounted = valueAccessor().onMounted;
      const data = valueAccessor().data;
      const elements = [];

      // Collect the real DOM nodes (ones with a tagName)
      for(let child=ko.virtualElements.firstChild(element);
          child;
          child=ko.virtualElements.nextSibling(child)) {
        if (child.tagName) { elements.push(child); }
      }
      onMounted(elements, data);
    });
  }
};

ko.virtualElements.allowedBindings.notify = true;

function ParentVM(params) {
  this.people = params.people;
  this.afterRenderPeople = (elements, data) => {
    console.log("Elements:", elements.map(e => e.tagName));
    if (data === this.people[0]) {
      console.log("Scroll to", elements[0].outerHTML);
      //let top = $(element[0]).offset().top;

      //scrollTo(top);
    }
  };
}

ko.components.register('parent-component', {
  viewModel: ParentVM,
  template: {
    element: 'parent-template'
  }
});

function ChildVM(params) {
  this.Name = params.person;
}

ko.components.register('listitem-person', {
  viewModel: ChildVM,
  template: {
    element: 'child-template'
  }
});

vm = {
  names: ['One', 'Two', 'Three']
};

ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<template id="parent-template">
  <div class="list-people" data-bind="foreach: people">
    <!-- ko component: { name: "listitem-person", params: { person: $data } }, notify: {onMounted: $parent.afterRenderPeople, data: $data} -->
    <!-- /ko -->
  </div>
</template>

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

<parent-component params="{ people: names }">
</parent-component>