10

当 activate 方法执行如下操作时，我可以轻松地显示加载消息：

        <div data-bind="compose:ActiveVm">
            <div class="text-center" style="margin : 75px">
                <i class="fa fa-spinner fa-spin"></i>
            </div>
        </div>

但是，如果我随后使用不同的视图模型更新我的 ActiveVm 属性，则不会显示启动内容。我知道启动内容仅设计为在“初始”加载时显示，但是在从一个视图模型转换到另一个视图模型时，我有哪些选项可以显示这样的消息？

请注意，此组合不参与路由...

更新：此处的相关 durandal 问题可能对未来的访问者有价值：https ://github.com/BlueSpire/Durandal/issues/414

4

2 回答 2

9

这乞求评论“你试过什么？” 但鉴于我可以看到这对未来用户的好处，我想投入 0.02 美元 -

启动画面显示在您的屏幕上，直到 Durandal 加载应用程序并将 div 替换id="applicationHost"为 shell 视图和加载的后续视图的内容。如果您想让它成为可重用的组件，您可以做的一件事是获取正在加载的视图并在 Durandal 项目的文件夹中Html.Partial创建自己的视图。app

例如，您将在 app 文件夹中创建一个新的 HTML 视图 -

飞溅页.html

<div class="splash">
    <div class="message">
        My app
    </div>
    <i class="icon-spinner icon-2x icon-spin active"></i>
</div>

然后从你的外壳中组合它-

<div data-bind="if: showSplash">
    <!-- ko compose: 'splashpage.html' -->
    <!-- /ko -->
</div>

在您的视图模型中，您可以在想要显示/隐藏时切换可观察的 showSplash -

var showSplash = ko.observable(false);

var shell = {
    showSplash: showSplash
};
return shell;

您可以像这样从其他视图模型中的激活方法调用它-

define(['shell'], function (shell) {

    function activate() {
        shell.showSplash(true);
        // do something
        shell.showSplash(false);
    }

});
于 2013-12-19T19:00:38.207 回答
5

在我看来，这听起来像是自定义transition可能有用的场景。当组合机制切换节点进出 DOM 时，它可以使用转换。

此页面在 Additional Settings>Transition（大约一半）下描述了自定义转换： http ://durandaljs.com/documentation/Using-Composition/

于 2013-12-19T19:04:19.753 回答