Question

我可以轻松地显示加载消息，而activate方法正是这样做的：

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

但是，如果我随后使用其他viewmodel更新ActiveVm属性，则不会显示启动内容。我知道启动内容仅用于显示“初始”加载，但在从一个视图模型转换到另一个视图模型时，我有什么选项可用于显示此类消息？

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

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

Answer 1

这引起了对“你试过了什么？”的评论。但考虑到我可以看到这对未来用户的好处，我想投入我的0.02美元 -

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

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

<强> splashpage.html

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

然后从 shell -

撰写

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

});

Answer 2

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

此页面在其他设置＆gt;转换（大约一半）下描述了自定义转换：http://durandaljs.com/documentation/Using-Composition/

Durandal：在作曲中表现出'加载......'

2 个答案: