9

在呈现页面中传递引导变量（即 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);
    }

});
4

3 回答 3

6

@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
});

显然，我引入数据的方式是特定于语言的，但无论您的情况如何，其余的都应该是有用的。

于 2012-03-27T18:54:07.357 回答
0

您可以通过禁用 build.js 中的 bootstrapData 来解决优化/构建问题，如下所示：

paths: {
    bootstrapData: "empty:",
于 2013-08-08T13:02:53.807 回答
0

不确定我的方法是否是最佳实践，但我做的事情很像你正在做的事情，除了将引导模型与全局对象对接，我在我的 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);   
});
于 2011-11-04T12:40:44.053 回答