Question

我有一个简单的页面，它是我正在做的SPA的一部分。当这个页面加载时，我想显示一个＆＃34;请等待，加载结果......＆＃34;信息。简单，对吧？都能跟得上...

我的结果页面html只是：

<section>
    <div data-bind="with: project">
        <h3 class="page-title">Results</h3>

        <div>
            <div data-bind="visible: $parent.session.isBusy()">
                <p data-bind="text: $parent.loadingtext"></p>
            </div>
            <div data-bind="visible: !$parent.session.isBusy()">
                <p data-bind="text: $parent.loadingText"></p>
                Total Energy: <span data-bind="text: total_Energy"></span>
            </div>
        </div>
    </div>
</section>

上面的页面已加载到我的＆＃34; shell.html＆＃34;页面以相当正常的方式 - 进入＆＃34;内容＆＃34;部分：

    <section>
        <!--<section id="content" class="main"> -->
        <!--ko router: { transition:'entrance', cacheViews:true }--><!--/ko-->
        <!--</section>-->
    </section>

我的resultspage viewmodel（简化）是：

        var getStarted = function () {
                session.isBusy(true);
                return datacontext.calcResults(session.prjID())
                    .then(function () {
                        return datacontext.getProjectById(session.prjID(), project)
                            .then(function () {
                                session.isBusy(false);
                            });
                    })
            }};

        var vm = {
            activate: activate,
            project: project,
            session: session,
            loadingText: loadingText,
            binding: function () {
                system.log('Lifecycle : binding : labTool');
            },
            bindingComplete: function () {
                system.log('Lifecycle : bindingComplete : labTool');
            },
            attached: function (view, parent) {
                system.log('Lifecycle : attached : labTool');
            },
            compositionComplete: function (view) {
                getStarted();
                system.log('Lifecycle : compositionComplete : labTool');
            },
            detached: function (view) {
                system.log('Lifecycle : detached : labTool');
            }

        };

        return vm;

问题在于所有页面导航内容都会加载并显示（在我的结果页面上面的内容部分位置）但是我的结果页面中的html直到＆＃34; getStarted＆＃34;之后才显示出来。方法完成，这与期望的行为完全相反。

我想在加载时显示消息，然后在完成时消失并且其他字段被绑定。我已经尝试了attached，compositionComplete以及其他一些事件，但似乎没有任何效果，并且html并没有显示出来，而＃34; getStarted＆＃34;方法正在运行。

我无法看到我在这里做错了什么？我的忙碌＆＃34; shell.html中其他地方的微调器工作正常。这与我将视图组合到内容部分的方式有关吗？

激活功能：

        var activate = function () {
            loadingText('Loading, please wait...');
        };

Answer 1

所以在我看来问题是你使用with: project绑定将该部分绑定到项目，但在其中你试图显示仅在加载时出现的文本，但你永远不会看到直到项目加载之后的那个文本，此时你不再需要该文本，因为它已经加载了。考虑一下，看看我是对的 -

<section>
    <div data-bind="with: project">
        <h3 class="page-title">Results</h3>

        <div>
            <div data-bind="visible: $parent.session.isBusy()">
                <p data-bind="text: $parent.loadingtext"></p>
            </div>
            <div data-bind="visible: !$parent.session.isBusy()">
                <p data-bind="text: $parent.loadingText"></p>
                Total Energy: <span data-bind="text: total_Energy"></span>
            </div>
        </div>
    </div>
    <div data-bind="if: session.isBusy()">
        <p data-bind="text: $parent.loadingtext"></p>
    </div>
</section>

请记住，with绑定几乎与if绑定相同，只是它设置了上下文。

Durandal页面加载生命周期似乎并没有像我期望的那样

1 个答案: