5

我有一个所谓的聊天视图，它基本上由一个repeat.for循环所有消息并使用<compose>.

问题是，一旦消息计数超过 50 并且用户在聊天之间导航（这会触发repeat.for更新，因为我替换了 VM 中的数据集），它就会变得非常慢。

我觉得在处理这样的视图方面我做错了。我能得到一些关于其他选择的意见吗？

我尝试过 UI 虚拟化，但不幸的是，当前插件不支持我需要的功能（可变高度项、自下而上对齐）。

我还对绑定做了很多优化，大多数都是一次性的，并且对数据集的更新是去抖动的。但这并没有改善事情，因为主要瓶颈是初始加载（第一次绑定视图）。

谢谢！

当前方法的示例：

<li repeat.for="message of chat.messages">
  <compose  view-model.bind="getMessageViewFromMessage(message) & oneTime"
            model.bind="message & oneTime"
            containerless>
  </compose>
</li>
4

2 回答 2

3

我认为您需要考虑根本不使用<compose>它。你有需要的理由<compose>吗？当您考虑它时<compose，每次显示消息时，元素都必须重新运行 Aurelia 为其他所有内容执行的相同视图实例化/绑定逻辑。

我会亲自创建一个带有一些可绑定属性的 HTML 部分，并在循环内部引用它。所以你可能有chat-message.html然后像这样显示它：

<li repeat.for="message of messages">
    <chat-message message.bind="message"></chat-message>
</li>

在可能的情况下并且在大多数情况下应该这样做，避免对潜在的大量重复项目进行动态组合。

于 2016-11-03T04:51:49.550 回答
1

你应该去aurelia-ui-virtualization图书馆看看。一旦你加载它，你可以在这样的地方替换它，repeat.for你virtual-repeat.for会得到一个虚拟中继器，这将有助于提高这种情况下的性能。

于 2016-11-02T18:40:26.320 回答