在激活解析之前启动转换

Question

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

以下是一些上下文：

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

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

• 手动设置deactivate（）中每个视图的动画，并通过其viewAttached（）将其设置回动画
• 将.page hostdiv的可见性绑定到router.isNavigation（使用自定义绑定来处理转换，例如来自淘汰站点的fadeVisible示例）
• 手动订阅router.is在自定义逻辑更改时导航并运行

我已经试过了所有这些，到目前为止，我最喜欢.page hostdiv上的自定义绑定，因为它涉及的代码量最少，但它只适用于我的情况，因为我的特定情况，不是一个通用的解决方案。

这似乎正是杜兰达尔转型的初衷。有没有一种更优雅的方法可以在Durandal中使用转换（在1.2或即将发布的2.0版本中）来实现这一点？

我看到这个问题，它似乎在问一些类似的问题，但似乎没有那么具体，也没有相关的答案。

Answer 1

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

Answer 2

您可以通过在shell中添加下一个代码来添加"router:route:activation"事件的处理程序.js:

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);
  });
}