Question

如何在durandal SPA初始屏幕中显示实际百分比的加载指标。

我正在使用HotTowel SPA模板。

<div id="applicationHost">
        <div class="splash">
          <div class="message">
              Durandal Starter Project
          </div>
          <i class="icon-spinner icon-2x icon-spin active"></i>
      </div>
    </div>

Answer 1

这取决于您认为的进步。 Durandal在封面下使用require.js来动态加载javascript文件，因此当您第一次启动项目并加载main.js时，require正在执行查找所有请求的js文件并加载它们的工作。如果你想展示它的进展可能会很棘手。以下是有关点击requirejs加载过程的Google小组讨论的链接：

https://groups.google.com/forum/#!topic/requirejs/JX-9bHP1BBo

此方法仅在您未使用网站的编译版本时才有用。在durandal docs页面上，通过将所有js和html视图合并到一个在启动时加载的单个文件中，可以完整地展示优化项目，并且无需显示文件加载的进度。

如果您在向项目用户显示之前必须完成一些长时间运行的进程，则可以在shell模块的activate函数中执行此操作。我使用嵌套jquery promise objects和blockUI plugin完成了此操作。你需要做的是从你的激活函数返回一个promise，这将导致durandal等到你加载你的shell ui之前完成你的启动代码。在该承诺中，您使用jquery's when/then函数来调用任何数量的其他函数，这些函数也必须返回promise。对于每个被调用的函数作为参数传递一个函数来更新你的进度ui。这是我的shell激活函数的样本

function activate() {

    var def = new $.Deferred();
    try {

    var messageBoxHtml = [
    '<div class="messageBox">',
        '<div class="modal-header">',
            '<h3>Processing</h3>',
        '</div>',
        '<div class="modal-body">',
             '<p class="message" id="blockMessageTag">Processing request, please wait...</p>',
             '<div class="progress progress-striped active page-progress-bar">',
                 '<div id="blockMessageTagProgress" class="progress-bar progress-bar-warning" style="width: 0%;"></div>',
             '</div>',
        '</div>',
        '<div class="modal-footer">',
        '</div>',
    '</div>'
    ].join('\n');

    $.blockUI({ message: messageBoxHtml });

    var updateMain = function (msg) {
        def.notify(msg);
    };

    var totalProgress = 0;
    def.progress(function (newMessage) {
        logger.log("Boot Progress", "shell", newMessage);
        $("#blockMessageTag").text(newMessage + "...");
        totalProgress++;
        $("#blockMessageTagProgress").width((totalProgress * 25) + '%');
    });

    $.when(module1.dowork(updateMain), module2.dowork(updateMain))
    .done(function () {
        $.unblockUI();
        router.map([
            { route: 'Home', moduleId: 'views/myhome', title: 'Home' },
        ]).mapUnknownRoutes('views/Common/404', 'not-found')
          .activate().done(function () {
              def.resolve();
          }).fail(function (xh, status, msg) {
              logger.log(msg, "Shell Startup Failure", xh);
              $("#blockMessageTag").text("Failure: Check Console Log For Details - 1");
              $("#blockMessageTagProgress").width('0%');
              def.fail();
          });
    }).fail(function (xh, status, msg) {
        logger.log(msg, "Shell Startup Failure", xh);
        $("#blockMessageTag").text("Failure: Check Console Log For Details - 2");
        $("#blockMessageTagProgress").width('0%');
        def.fail();
    });
}
catch (ex) {
    logger.log(ex.message, "Shell Startup Failure", ex);
    $("#blockMessageTag").text("Failure: Check Console Log For Details - 3");
    $("#blockMessageTagProgress").width('0%');
    def.fail();
}
return def.promise();

}

所有module1.dowork函数也必须返回一个这样的promise：

function (uiMsgBox) {

var def = new $.Deferred();

uiMsgBox('Starting Process');

try {
    //do whatever work you need to do here
    uiMsgBox('Process Complete');
    def.resolve(jsret);
} catch (error) {
    def.reject();
}

return def.promise();

};

每次调用传递给长期运行函数的updateMain函数（module1.dowork和module2.dowork）都会调用notify返回durandal的promise。通知将导致调用进度函数并更新进度UI。我有点被骗，只是对进度条间隔进行了硬编码。条形图以0％宽度开始，并在每次调用时通过将totalProgress值增加1并将其乘以预期调用数的正确百分比来更改。每个dowork方法应该调用更新进度ui两次，因此总共4次调用使得progess增量25，（100/4）。您需要根据需要进行调整。

Durandal SPA飞溅百分比

1 个答案: