0

RequireJS 大约有一半时间为我工作。如果我刷新页面，它会随机出现加载问题。

我正在调整一个小型 MVC 项目以使用它，并执行以下操作：RequireJS 如何处理多个页面和部分视图？

我有一个常见的 main.js，它从我的主 _layout.cshtml 加载。以及使用上述技术的小部件和其他地方的其他部分视图。下面的示例来自我的登录页面：

<script type="text/javascript">
    require(["jquery", "kendo", "domReady!"], function ($, kendo) {        

        $("#signInForm").kendoWindow({
            draggable: false,
            width: "500px",
            modal: true,
            title: "Sign In",
            resizable: false
         });        
    }); 
</script>

似乎 Chrome 有时会在 main.js 之前加载和处理内联脚本（其中定义了路径映射和其他配置）。要求“domReady”没有区别。

如何强制此脚本等到 require.js 和 main.js 运行？

一个不太理想的后备方法是将 jQuery 返回到它的全局范围并使用某种自定义事件。你有更好的主意吗？或者是否有一种内置到 RequireJS 中的方法？

更新：这是我现在在 _layout.cshtml 中使用的解决方法

<script src="@Url.Content("~/Scripts/jquery-1.7.2.min.js")" type="text/javascript"></script>
<script type="text/javascript">
    function requireIt(requirements, callback) {
        if ($(document).data("requireReady") === true) {
            require(requirements, callback);
        } else {
            $(document).bind("requireReady", null, function () {
                $(document).data("requireReady", true); 
                require(requirements, callback);
            });
        }
    }
</script> 
<script data-main="/scripts/main" src="@Url.Content("~/Scripts/require.js")" type="text/javascript"></script>

jQuery 恢复为全局夹具，我的部分视图及其内联脚本使用这个 requireIt 包装器。并且 main.js 触发 requireReady。

4

2 回答 2

1

在 require.js 网站上找到了这个：

理想情况下，您加载的脚本将是通过调用 define() 定义的模块。但是，您可能需要使用一些不通过 define() 表达其依赖关系的传统/遗留“浏览器全局”脚本。对于这些，您可以使用 shim 配置。正确表达它们的依赖关系。

链接到 shim 配置文档

如果你不表达依赖关系，你可能会遇到加载错误，因为 RequireJS 异步加载脚本并且速度不正常。

您可以在 require.js文档中阅读更多相关信息，第 1 点：加载 javascript 文件。

今晚我会尝试一下，因为我现在没有时间。但我可以想象它会解​​决我的问题，所以也可能是你的。

于 2012-08-09T09:37:53.393 回答
1

继乔纳斯的回答之后，搞砸了几天，我发现从 _Layout.cshtml 执行此操作的唯一方法如下（脚本标记在标题中）。我还在各种教程中看到了正文中的脚本标记，这似乎不起作用。

<script type="text/javascript" src="~/js/lib/require.js"></script>
        <script type="text/javascript">
            require.config({
                baseUrl: 'js/lib',
                paths: {
                    jquery: 'jquery-1.8.2',
                    kendo: 'kendo.all-2012.2.913.min',
                    underscore: 'underscore.min',
                    backbone: 'backbone.min',
                    app: '../app'
                },
                shim: {
                    underscore: {
                        exports:'_'
                    },
                    Backbone: {
                        deps: ['jquery', 'underscore'],
                        exports: "Backbone"
                    }
                }
            });            
        </script>

我不明白为什么对 main.js 的引用不起作用（所以我从 _Layout.cshtml 中删除了它）

<script data-main="js/main.js" src="~/js/lib/require.js" type="text/javascript"></script>

我还根据 dox 简化了 js 文件夹的布局：

website
.....js
.....js/lib
.....js/lib/jquery-1.8.2.js
.....js/lib/underscore.js
.....etc
.....js/app
.....js/app/myscript.js
.....etc

希望这可以帮助

杰里米

于 2012-10-13T14:47:34.073 回答