5

有没有一种简单的方法可以使用 Durandal 的转换立即淡出旧视图，并在其激活功能解决后淡入新视图？

这里有一些上下文：

我有一个 Durandal 1.2 SPA，其中大多数视图的激活功能都会进行服务调用并根据需要返回一个承诺。这一切都很好，但是只有在加载完成时才会运行转换，有时服务可能需要几秒钟才能响应 - 导致用户体验不佳，您单击链接并且需要几秒钟才能发生任何明显的事情。

解决方案是立即对旧视图进行动画处理（在激活解析之前），然后在激活完成后在新视图中进行动画处理。目前，每个动画视图都对应一条路线，我不希望这会改变。我想出了并测试了一些可行的解决方案，但似乎不太理想（并且不利用 Durandal 的过渡框架）：

  • 在其 deactivate() 中手动为每个视图设置动画，并通过其 viewAttached() 将其重新设置为动画
  • 将 .page-host div 的可见性绑定到 router.isNavigating（使用自定义绑定来处理转换，例如淘汰站点中的 fadeVisible 示例）
  • 手动订阅 router.isNavigating 并在更改时运行自定义逻辑

我已经尝试了所有方法，到目前为止，我最喜欢 .page-host div 上的自定义绑定，因为它涉及的代码最少，但由于我的具体情况，它仅适用于我的情况，不是通用的解决方案。

这似乎正是杜兰达尔的过渡所创造的那种东西。在 Durandal 中使用转换（在 1.2 或即将发布的 2.0 版本中）是否有更优雅的方式来执行此操作？

我看到这个问题似乎在问类似的问题，但似乎不太具体，并且没有相关的答案。

4

2 回答 2

0

将您的异步逻辑移出激活并将其放入 viewAttached。这将允许视图立即动画。然后，从 viewAttached 中，您可以安全地执行异步代码而不会破坏 KO，因为已经应用了绑定。（注意：viewAttached 在 2.0 中重命名为 attachToParent。）

于 2013-06-24T19:08:48.103 回答
0

您可以通过将下一个代码添加到 shell.js 中来为“router:route:activating”事件添加处理程序：

router.on('router:route:activating').then(function () {
  //fade out animation goes here;
  //Usually that is changing of observable which will add/remove css class for your view (or shows loading overlay)
  //Animation of view transition could be done by add class css3 animation.
});

如果您使用“加载”可观察对象 - 在自定义转换中，您可以将此可观察对象设置回隐藏加载覆盖：

if (context.bindingContext.$data && context.bindingContext.$data.isLoading && ko.isObservable(context.bindingContext.$data.isLoading )) {
  composition.current.complete(function() {
  context.bindingContext.$data.isLoading (true);
  });
}
于 2014-04-29T12:43:25.373 回答