Question

我在使用具有knockout.js格式的页面正确加载我的脚本时遇到了一些麻烦。一旦页面加载，我的包含viewmodel的js文件就不会立即加载，因此会出现错误，这会导致页面闪烁我的所有验证消息并显示应隐藏的div，但随后会加载并显示表单看似正常。

在main.ctp（cakephp视图文件）上，我加载了一个名为loadScripts.JS的文件，其中包含以下内容

//loadscripts.JS
jQuery(document).ready(function ($) {   
    load_scripts();
});

function load_scripts(){
    $.getScript("localhost/js/knockout-2.3.0.js", function() {
        $.getScript("http://localhost/js/Knockout-Validation/Src/knockout.validation.js", function() {
                retrieve_window();
        });
    });
}

所以到目前为止，已经加载了淘汰赛和淘汰赛验证。然后它调用main.ctp上的一个函数来检索包含挖空形式的窗口

//main.ctp
<script src="/localhost/js/loadscripts.js"></script> <!-- this is the JS file I showed above

function retrieve_window(){
    $.post("/demo/demo_window/1",function(data) {
        $('#window_wrapper').html(data);
    });
}

在demo_window视图（cakePHP）上，立即在头部调用viewmodel

//demo_window.ctp
<head>
  <script src="localhost/js/demo_form.js"></script>
</head>

因此加载脚本的顺序是（通过Chrome中的网络标签确认）

敲除
敲除验证
demo_form.ctp（knockout powered form）
demo_form.js（表单的视图模型）

我甚至尝试在上面的$ getScripts集群中加载demo_form.js，但是尽管在demo_form.ctp之前加载，表单似乎根本没有“看到”js。显示所有验证错误和隐藏的div。因此，加载顺序（由Chrome中的网络选项卡确认）

敲除
敲除验证
demo_form.js（表单的视图模型）
demo_form.ctp（knockout powered form）

奇怪的是这并没有给我任何错误。它只是显示好像有错误（显示验证消息，显示隐藏的div）。

Answer 1

你可能最好使用一个合适的模块加载器系统（require.js是我最熟悉的那个，可能是你最能帮助你的人，但它不是只有一个）。除其他外，此类系统确保在所有依赖项都已加载并运行之前，没有任何代码会尝试运行。他们需要一些前期学习，但收益很大。

防止“无格式/不受欢迎内容的Flash”（FOUC或FUBC）的最后解决方案是通过内联display: none属性在违规元素上设置style，然后在代码中取消隐藏它们。但是，你不应该用它来绷带来解决更基本的问题。

Knockout.JS加载序列问题

1 个答案: