将bootstrapped变量和JSON传递给require.js

Question

在呈现的页面中传递引导变量(即JSON数据或配置变量)的最佳实践是什么,require.js以便可以检查它们是否由依赖项使用？

看起来这可以通过检查window对象来完成(即,window.bootstrapped_models但这似乎不是最佳的.

app.html - HTML文档中的示例数据

<script>
var config = {
    "isAdmin": true,
    "userId": 1
};
var bootstrapped_models = {
    "groups": [
        {
            "id": 1,
            "name": "Foo"
        },
        {
            "id": 2,
            "name": "Bar"
        }
    ]
}
</script>

app.js - 使用require()的示例应用程序

require(['jquery', 'GroupCollection'], function($, GroupCollection) {

    // extend default config
    if (config) {
        $.extend(defaults, config);
    }

    // use bootstrapped JSON here
    var collection = new GroupCollection;
    if (bootstrapped_models.groups.length > 0) {
        collection.add(bootstrapped_models.groups);
    }

});

Answer 1

来自@timDunham的答案很有帮助,但对我来说感觉有点过于复杂.玩弄require.js和Lithium(PHP MVC),我想出了以下内容.它很简单,并且在我碰到的每个实例中都有效.

<script type="text/javascript">
define('bootstrapData', function () {
    return <?php echo json_encode($bootstrapData) ?>;
});
</script>

然后通过执行以下操作可以获得:

define(['bootstrapData'], function(bootstrapData) {
    console.log(bootstrapData); // Will output your bootstrapped object
});

显然,我提供数据的方式是特定于语言的,但其余的应该是有用的,无论你的情况如何.

Answer 2

不确定我的方法是否是最佳实践，但我做的事情很像你正在做的事情，除了不是将引导模型对接在全局对象上，而是在我的 HTML 页面中为其创建一个定义：

<script type="text/javascript">
    define("bootstrappedModelJson", function() {
        return @Html.Action("Controller", "RenderModel");
    });

    require({
        baseUrl: //etc.
    }, ["app"],
    function(){

    });
</script>

然后我有一个名为current.model其他模块可以需要的 js 文件，如下所示：

define(
[
    'require',
    'model'
],
function (require, Model)
{
    var json= require("bootstrappedModelJson");

    return new Model(json);   
});