Question

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

以下是一些背景信息：

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

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

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

我已经尝试了所有这些，到目前为止，我喜欢.page-host div上的自定义绑定最好，因为它涉及的代码量最少，但它只适用于我的情况，因为我的具体情况并且不是'一般的解决方案。

这似乎就像Durandal的过渡创造的那样。有没有更优雅的方法在Durandal中使用过渡（在1.2或即将发布的2.0版本中）这样做？

我看到this question似乎在问类似的东西，但似乎有点不那么具体，没有相关的答案。

Answer 1

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

Answer 2

您可以通过在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.
});

如果你使用“加载”observable - 在自定义转换中你可以将这个observable设置为隐藏加载叠加：

if (context.bindingContext.$data && context.bindingContext.$data.isLoading && ko.isObservable(context.bindingContext.$data.isLoading )) {
  composition.current.complete(function() {
  context.bindingContext.$data.isLoading (true);
  });
}

在激活解决之前启动转换

2 个答案: