Javascript 在加载所有内容完成之前，RequireJS不会隐藏KnockoutJS绑定 tl；博士

我看到的问题是，我的初始页面（Index.cshtml）有一些被调用的淘汰代码（indexViewModel.js），该代码最初应该在加载时隐藏一个div，但在短短几秒钟内，该div确实是而不是隐藏的b/c，淘汰代码尚未计算。

---

背景与问题 我刚开始重构我的网站，使用RequireJS。它是一个ASP.NETMVC5应用程序，使用KnockoutJS、jQuery和一些jQuery&JavaScript插件

在RequireJS重构之前，一切都很好。现在，当用户加载索引时，微调器（

data bind=“showSpinner”

为false）将向用户显示大约3秒钟，然后加载淘汰代码，并意识到它应该被隐藏，然后隐藏

所以我想知道如何防止隐藏元素的“闪现”发生？在Angular中，你可以做

ng斗篷

，但我还没有找到击倒或要求的等价物

我知道在加载所有模块之前，我可以先隐藏一些东西，但我不想在默认情况下隐藏整个应用程序

我的代码 这是我的网站的基本设置，使用RequireJS、Knockout、jQuery和ASP.NETMVC

Index.cshtml

<div data-bind="showSpinner">
    <img src="/Content/spinner.gif" />
</div>

<!-- at the bottom of my Index.cshtml I have this section below 
    which renders the script at the very bottom of the entire DOM, via
    ASP.NET MVC `render scripts`-->

@section scripts 
{
    <script>
        var d = @Html.Raw(Json.Encode(Model));
        require( [ "/Scripts/app/common.js" ], function() {
            require( [ "app/offers/index"], function(view) {
                view.init(d);
            });
        });
    </script>
}

index.js

require.config({
    baseUrl: "/Scripts/",
    paths: {
        "jquery": "jquery-1.11.2",
        "underscore": "underscore.min",
        "knockout": "knockout-3.3.0.debug",
        "komapping": "knockout.mapping-latest",
        "noUiSlider": "jquery.nouislider.all",
        "bootstrap": "bootstrap" 
    },
    shim: {
        "komapping": {
            deps: ['knockout'],
            exports: 'komapping'
        },
        "noUiSlider": {
            deps: ["jquery"],
            exports: '$'
        },
        "bootstrap": {
            deps: ["jquery"]
        }
    }
});

define(['knockout', 'app/offers/indexViewModel'], function (ko, mvm) {
    return {
        init: function (modelData) {
            var vm = modelData;
            mvm.addMethods(vm);
            ko.applyBindings(vm);
        }
    };
});

define(['knockout', 'jquery'], function (ko, $) {
    return {

        addMethods: function (viewModel) {
            viewModel.showSpinner = ko.observable(false);
            //then a bunch of other KO code, but that observable above is the first thing & i use some jQuery plugins below, that's why i load in jQuery
        }
    };
});

indexViewModel.js

require.config({
    baseUrl: "/Scripts/",
    paths: {
        "jquery": "jquery-1.11.2",
        "underscore": "underscore.min",
        "knockout": "knockout-3.3.0.debug",
        "komapping": "knockout.mapping-latest",
        "noUiSlider": "jquery.nouislider.all",
        "bootstrap": "bootstrap" 
    },
    shim: {
        "komapping": {
            deps: ['knockout'],
            exports: 'komapping'
        },
        "noUiSlider": {
            deps: ["jquery"],
            exports: '$'
        },
        "bootstrap": {
            deps: ["jquery"]
        }
    }
});

define(['knockout', 'app/offers/indexViewModel'], function (ko, mvm) {
    return {
        init: function (modelData) {
            var vm = modelData;
            mvm.addMethods(vm);
            ko.applyBindings(vm);
        }
    };
});

define(['knockout', 'jquery'], function (ko, $) {
    return {

        addMethods: function (viewModel) {
            viewModel.showSpinner = ko.observable(false);
            //then a bunch of other KO code, but that observable above is the first thing & i use some jQuery plugins below, that's why i load in jQuery
        }
    };
});

---

尝试在样式表或内联样式中将内容标记为“display:none；”。然后使用Knockout的“可见”绑定来控制可见性。内容将被隐藏，直到敲除有机会进行评估，并将可见性设置为您的敲除逻辑所规定的任何内容

RequireJS可能是异步加载脚本的，因此标记是在JavaScript有机会执行之前呈现的。因此，您需要一种同步方式来隐藏内容，直到JavaScript执行为止

NgClope使用了完全相同的技巧：有一个CSS选择器，在Angular的JavaScript有机会执行之前，它会隐藏任何具有NgClope属性的元素

---

尝试在样式表或内联样式中将内容标记为“显示：无；”。然后使用Knockout的“可见”绑定来控制可见性。内容将被隐藏，直到敲除有机会进行评估，并将可见性设置为您的敲除逻辑所规定的任何内容

RequireJS可能是异步加载脚本的，因此标记是在JavaScript有机会执行之前呈现的。因此，您需要一种同步方式来隐藏内容，直到JavaScript执行为止

NgClope使用了完全相同的技巧：有一个CSS选择器，在Angular的JavaScript有机会执行之前，它会隐藏任何具有NgClope属性的元素

---

这就是我想到的“黑客”（可能不一定是黑客，我只是不确定是否有更雄辩的方式）。虽然这可能是实现它的唯一途径。我希望能找到另一种方法，我相信其他人也遇到过这种情况。我还认为我上面的代码可能是错误的，或者可以修改。不管怎样，谢谢你的回答。是的，你可以将你想要的行为包装到一个叫做“斗篷”的定制绑定中。然后您的代码可能看起来像

。仍然没有角度那么清晰。外部样式表不适合我，但内联样式表不适合我，这就是我所想到的“黑客”（可能不一定是黑客，我只是不确定是否有更雄辩的方式）。虽然这可能是实现它的唯一途径。我希望能找到另一种方法，我相信其他人也遇到过这种情况。我还认为我上面的代码可能是错误的，或者可以修改。不管怎样，谢谢你的回答。是的，你可以将你想要的行为包装到一个叫做“斗篷”的定制绑定中。然后您的代码可能看起来像

。仍然不如Angular那么清晰。外部样式表对我不起作用，但内联样式表对我不起作用