javascript - 在对服务器的调用完成之前启动屏幕消失

Question

您好，我希望能够将我的应用程序的启动延迟一点，这就是我的意思。

这是我的 shell View :

<div>
<!-- ko compose: { view : header }-->
<!--/ko-->
<!-- ko compose: { view : content }-->
<!--/ko-->

这是我的 shell View 模型:

define(['plugins/router', 'services/dataService' , 'models/appViewModels'],
    function (router,dataService , appViewModels) {

        var vm = {
            header: ko.observable(),
            content: ko.observable(),
            activate: activate
        };

        function activate() {
            setActivePage();
        }


        function setActivePage() {
            $.when(dataService.account.isAuthenticated())
                .done(function(isAuthenticated) {
                    setDefaultDisplayPage(isAuthenticated)
                }).fail(function(data) {
                    alert(data);
                });
        }

        function setDefaultDisplayPage(isAuthenticated) {
            if (isAuthenticated) {
                setHeaderAndContentObservables(appViewModels.header.generalHeader, appViewModels.content.homeContent);
            } else {
                setHeaderAndContentObservables(appViewModels.header.loginHeader, appViewModels.content.loginContent);
            }
        }
}

我使用可观察量而不是 View 路径的字符串表示的原因是因为在我的 shell 中我正在决定是否应该在登录或主页上发送我的用户.

这一切都很完美，除了从服务器获取 isAuthenticated 属性所需的时间之外，启动屏幕消失，并且用户在空白页面上等待，直到收到数据。

现在我可以尝试获取 main.js 文件中的数据并将其缓存，但我认为 main.js 应该只负责应用程序配置。

有什么方法可以在 shell 实际绑定(bind)并且启动屏幕消失之前调用服务器获取数据吗？

Answer 1

我同意 PW Kad 的建议。 Durandal 充满了 Q.js。我也有同样的场景[检查用户是否经过身份验证=>通过返回 promise 的 Durandal 路由器从数据库加载用户菜单=>加载内容]但是，我在您的代码中看不到路由器。

无论如何，在 activate 方法中你可以做这样的事情:

  var vm = {
            header: ko.observable(),
            content: ko.observable(),
            isAuthenticated: ko.observable(false),
            activate: activate
        };

function activate() {

            return Authenticate()
                 .then(setDefaultDisplayPage)
                 .fail(failed);
        }
function Authenticate() {
// pass an observable as a parameter to your function 
                dataService.account.isAuthenticated(isAuthenticated);
                return Q.resolve();
                }
       function setDefaultDisplayPage() {        
        if(isAuthenticated()) {
    setHeaderAndContentObservables(appViewModels.header.generalHeader,appViewModels.content.homeContent);
}
        else { setHeaderAndContentObservables(appViewModels.header.loginHeader,appViewModels.content.loginContent);
        }
    }
    function failed(){
// failure code goes here
}

这样，在从服务器获取数据之前，您的 View 模型不会被绑定(bind)。