javascript - 加载两个脚本 block (使用 lab.js 作为加载管理器)

Question

我试图在不同的位置加载两个 lab.js block ，但如果我使用第一个 block 中加载的文件中的第二个 block 中的函数，它们将显示为未定义。

这是第一个 block (从我的 MVC 项目加载到 header 模板中

<script>
$LAB
.script("<?php echo(GlobalConfig::$ROOT_URL); ?>scripts/jquery-1.10.2.min.js").wait()
.script("<?php echo(GlobalConfig::$ROOT_URL); ?>bootstrap/js/bootstrap.min.js").wait()
.script("<?php echo(GlobalConfig::$ROOT_URL); ?>bootstrap/js/bootstrap-datepicker.js").wait()
.script("<?php echo(GlobalConfig::$ROOT_URL); ?>scripts/libs/underscore-min.js").wait()
.script("<?php echo(GlobalConfig::$ROOT_URL); ?>scripts/libs/underscore.date.min.js").wait()
.script("<?php echo(GlobalConfig::$ROOT_URL); ?>scripts/libs/backbone-min.js").wait(function(){
    $(document).ready(function(){
        alert("loaded");
    });
});
</script>

这是在内容模板中加载的第二个 block

$LAB
.script("../scripts/jquery-1.10.2.min.js").wait(function(){
    $(document).ready(function(){

        $(".test-badges").each(function( index ) {
            $( this ).tooltip({
              'show':true,
              'placement': 'bottom',
              'title' : 'Marca esta casilla si consideras que tu compañer@ debe responder igual.'
            });

        });
    });
});

第二个 block (.tooltip) 中的函数未加载，因为它们是 jquery 的依赖项。 无法将两个 block 统一在 header 中加载的 block 中(两个文件完全独立，并且内容是动态创建的，这也不是我想要实现的目标)

所以问题是..有没有办法告诉第二个 block 仅在第一个 block 完全加载时加载？

非常感谢!

Answer 1

我认为问题在于您正在创建两个单独的 $LAB 链，并且您想要的可以通过存储对 $LAB 链的引用并将最后一次调用链接到末尾来实现，如下所示:

第一个 block :

<script>
var chain = $LAB
.script("<?php echo(GlobalConfig::$ROOT_URL); ?>scripts/jquery-1.10.2.min.js").wait()
.script("<?php echo(GlobalConfig::$ROOT_URL); ?>bootstrap/js/bootstrap.min.js").wait()
.script("<?php echo(GlobalConfig::$ROOT_URL); ?>bootstrap/js/bootstrap-datepicker.js").wait()
.script("<?php echo(GlobalConfig::$ROOT_URL); ?>scripts/libs/underscore-min.js").wait()
.script("<?php echo(GlobalConfig::$ROOT_URL); ?>scripts/libs/underscore.date.min.js").wait()
.script("<?php echo(GlobalConfig::$ROOT_URL); ?>scripts/libs/backbone-min.js")
</script>

第二 block :

chain.wait(function(){
    $(document).ready(function(){

        $(".test-badges").each(function( index ) {
            $( this ).tooltip({
              'show':true,
              'placement': 'bottom',
              'title' : 'Marca esta casilla si consideras que tu compañer@ debe responder igual.'
            });
        });
    });
});