Question

我正在使用KnockoutJS开发一个应用程序，它打算在一个长的可滚动列表中显示页面/幻灯片。

这些页面中的每一页都具有一些先进的WYSIWYG功能以及大量其他工具和功能。数据附件。

然而，随着页面/幻灯片数量的增加，我注意到了巨大的性能提升。

因此，我想改为只呈现视口中的幻灯片/页面的方式。一旦你滚过一个项目，我希望KnockoutJS销毁之前呈现的任何内容，而是渲染任何进入视口的内容。销毁的项目应替换为占位符li-tag（直到您向后滚动它们为止）。

到目前为止有效

到目前为止，我已经整理了一个JSFiddle，它很好地展示了如何只将“可见”项目的可观察“inView”设置为true。看一下演示，向您展示viewmodel如何响应滚动：https://jsfiddle.net/1xxy6q83/

缺少什么

然而，问题是让条件显示工作。每当我尝试混合/匹配foreach和if时，它就会停止工作。我正在寻找的是Knockout只呈现在视口中看到的内容。当一个项目移出视图时，Knockout应该清理它，移除任何事件，然后渲染一个非常简单的占位符li-tag，以确保列表不会跳转。

Answer 1

您可以使用template绑定，其中模板名称基于inView的值：

function Page(page) {
  var self = this;
  this.page = ko.observable(page);
  this.inView = ko.observable(false);
  this.templateName = function() {
    return self.inView() ? 'complex' : 'placeholder';
  };
}

绑定看起来像：

    <ul data-bind="foreach: pages">
      <li data-bind="inview: $data">
        <div data-bind="template: templateName()">

        </div>
      </li>
    </ul>

here's an updated fiddle。我对inView的设置进行了延迟，因此您可以在滚动时看到模板交换。

KnockoutJS性能：仅渲染当前在视图中的元素（清理/摧毁其他元素）

到目前为止有效

缺少什么

1 个答案: