Durandal 如何附加视图并且在它准备好之前不显示它？

Question

这是我试图实现的不寻常场景： 我得到了gmap 异步加载谷歌地图的模块。我正在使用以下代码正确附加 Google 地图：

 composition.addBindingHandler('googleMap', {
        init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
            gmap = ko.utils.unwrapObservable(valueAccessor());

            var latLng = new gmaps.LatLng(37.774107,-122.420853);
            var mapOptions = {
                center:latLng,
                zoom: 17,
                disableDefaultUI: true,
                mapTypeId: gmaps.MapTypeId.ROADMAP
            };

            gmap.googleMap = new gmaps.Map(element, mapOptions);
            navigator.geolocation.getCurrentPosition(onSuccess, onError);
        }
    });

我的 gmap 模块是我想在用户登录后首先显示的模块。所以我想在显示这个模块之前执行一些操作。在大多数情况下，我可以在 canActivate 方法中使用 Promise，但是！在这种情况下，我的模块没有附加。但是我需要附加这个模块，执行一些操作（获取数据库记录，确定用户地理位置，根据这些数据在谷歌地图上添加标记）并且只有当它完成后才向用户显示模块。 我怎样才能得到这个作品？我尝试了 Promises，但它对我不起作用，因为我听了 attached 方法，该方法在显示模块之前不会触发。 所以问题是：如何激活和附加视图模型及其适当的视图（激活和附加的回调应该触发）但不要显示它直到条件？

更新： 好的，在我看来，我的问题并不是很清楚。这是我的场景：
1. 我的登录模块激活。用户应键入他的凭据。
2.一旦授权返回成功，Gmap模块应该被激活并附加，但不显示。用户仍应看到登录模块和消息，例如“正在加载数据...”
3. Gmap 模块应该完全加载（所有的回调都应该触发）。我需要与 DOM 交互的可能性，这意味着应该附加该模块。但没有显示。
4. 满足某些条件后，SignIn 模块将不可见并显示 Gmap。

激活回调中的承诺不适合这种情况，因为在承诺解决之前不会附加视图。基本上授权成功后我需要这样的东西：

router.navigate('#gmap', { show: false });
...或...
router.attachModule('#gmap', ...{});

为什么我需要与 DOM 交互，为什么激活回调中的 Promise 不适合我？因为我需要启动 Gmap 对象，该对象只能使用页面上现有的 gmap 画布启动：

 composition.addBindingHandler('googleMap', {
        init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
            gmap = ko.utils.unwrapObservable(valueAccessor());
            var mapOptions = {
             ...

            };

            gmap.googleMap = new gmaps.Map(element, mapOptions);

        }
    });

还有 HTML：

<div id="gmap-section">
    <div id="gmap-canvas" data-bind="googleMap:map"></div>
</div>

绑定仅在视图附加后才起作用。

Answer 1

我还没有完全理解你的问题，但我会试着给你一些思考的食物。 ViewModel，在最佳实践中，应该只负责纯视觉相关的东西。所以任何繁重的计算、数据库连接或其他任何东西都应该被拉到一个单独的服务中。在 Durandal 的情况下，这只是一个简单的 RequireJS 模块。这应该是一个单例，并且可以被多个虚拟机所需要。

这样做并不是绝对需要立即拉入新的虚拟机，而是在登录时开始计算，完成后继续加载新的 GMapVM。

至于如何做到这一点，您可以在 SignIn 中启动服务调用并在 Promise 完成后导航到 GMapVM，或者如果您不喜欢 Promises，则使用 Durandal 内置的 Pub/Sub 流程。

---

从 Durandals 内部系统开始，GMapVM 的 canActivate 可能也是一个合适的解决方案，或者可以从 SignInVM 取消激活

Answer 2

如果您的 activate 方法返回一个承诺，Durandal 的路由器将等到该承诺解决后再路由到文档中提到的新路由 - http://durandaljs.com/documentation/Using-The-Router.html

如果您想创建自己的 Promise 并使用 setTimeout 在您的应用中进行演示。

function activate () {
    var promise = Q.deferred();
    setTimeout(function () { promise.resolve(true); }, 5000);
    return promise;
}

这将向 Durandal 的路由器返回一个 Promise，然后 5 秒后它将解决该 Promise。在 promise 解决之前，您应该会看到旧路线。

编辑

好的，在这里说明很明显，但是从 cmets 听起来，您在激活完成和附加回调完成之间遇到了问题。放弃我之前所说的话，这是一种快速而简单的方法，可以完成听起来像是你想要完成的事情，但很难确定，因为我不太明白你在问什么......

var showGmapStuff = ko.observable(false);

function activate () {
    var promise = Q.deferred();
    initializeStuff(promise);
    return promise;
}

function initializeStuff(promise) {
    connecttoserver();
    dootherstuff().then(finished);

    function finished() {
        promise.resolve(true);
    }
}

function attached () {
    showGmapStuff(true);
}

在你看来——

<div data-bind="if: showGmapStuff">
    <div data-bind="gmap: mapdata"></div>
</div>

在这种情况下，gmap 绑定将不存在，直到激活返回一个承诺并且附加的回调将 showGmapStuff 设置为 true。这样一来，它就不会被视为 false ，而是在您想要它之前根本不会被评估。