Question

我们的应用程序中有多个表单，它们广泛使用了小部件。

不幸的是，这会导致表单以非常“抖动”的方式加载。它仍然可以非常快速地加载，但是你可以一眼就看到每个小部件“pop”进入视图。

这是小部件基础架构的预期副作用，还是有一种技术可以让我们在连接之前强制Durandal构建整个视图（小部件和所有视图），这似乎是部分视图的工作原理？（我们能够将这些小部件中的许多小部件转换为部分视图以缓解这种现象）。

如何轻松重现行为

使用HTML示例，找到app / widgets / index.html并进行一些小修改，以创建一个包含大量小部件的视图：

<div>
    <h1>Widgets Sample</h1>
    <!-- ko foreach: new Array(100) -->
    <div data-bind="expander:{items:$root.projects}">
        <h3 data-part="header">Project: <span data-bind="text: name"></span></h3>
    </div>
    <!-- /ko -->
    <button class="btn" data-bind="click: addNewProject">Add</button>
</div>

刷新页面时，您会看到滚动条明显“缩小”。我怀疑这是因为每个单独的小部件一次被添加到DOM中，而不是“与父视图一起”，这是部分视图的工作方式。

注意：使用这个非常简单的标记，效果相当微妙，但是UI元素越复杂，“studdering”变得越明显和刺激（特别是当您将非小部件内容嵌套在各种小组之间时）。

Answer 1

目前看来没有明显的答案，但https://github.com/BlueSpire/Durandal/issues/434存在与此问题交叉链接的问题。

Durandal - 使用许多小部件导致UI加载“紧张”

1 个答案: