Дурандал отложил состав на целевой странице?

Question

Я использую Durandal для своего рода целевой страницы и использую его для заполнения основного содержимого страницы (#applicationHost, красная область внизу). Это работает, но скорость рендеринга страницы является проблемой (requirejs, ajax-вызовы, композиция и т. Д.)

Поскольку у нас уже есть данные контента, мы рассматривали рендеринг контента страницы на стороне сервера.

Однако мы все же хотели бы использовать Durandal на этой странице, чтобы разрешить хэш-маршрутизацию к другим представлениям, запускать диалоги Durandal и привязывать данные к некоторым наблюдаемым, которые можно загружать асинхронно. (области, выделенные зеленым цветом ниже)

Проблема в том, что я не хочу заменять содержимое #applicationHost (красным цветом выше) сразу при запуске Durandal на этой целевой странице. Для хэш-маршрутизации в другие представления я хотел бы заменить или скрыть его.

Answer 1

Придумали для этого достойное решение, надеюсь, оно поможет другим:

https://github.com/bestguy/durandal-delayed-composition

Answer 2

Не уверен, что именно вы спрашиваете, но похоже, что это может решить хотя бы часть проблемы.

Вы можете использовать "обещания", чтобы обеспечить минимальную задержку между загрузкой заставки и вашим приложением при любом запуске. Предполагая общую настройку, в которой ваш Durandal main.js загружает shell.js при запуске, верните комбинированное обещание из обратного вызова shell.js "activ". Я рекомендую использовать библиотеку Q для обещаний ( Q + Durandal docs).

Shell.js будет содержать что-то вроде следующего. Приведенная ниже логика приводит к тому, что заставка отображается не менее 3 секунд. Дольше, если initializeAppPromise занимает больше 3 секунд:

in shell.js...

activate = function(){

    var initializeAppPromise = router.map(....)..etc...activate();

    var minimumDelayPromise = Q.delay(3000); //give splash animation/whatever time to display

    return Q.all([initializeAppPromise, minimumDelayPromise ])
            .spread(function(routerActivationResponse){
                 return routerActivationResponse;
             });
    }