Передача загруженных переменных и JSON в require.js - PullRequest
9 голосов
/ 02 ноября 2011

Как лучше всего передавать загрузочные переменные на отображаемой странице (то есть данные 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);
    }

});

Ответы [ 3 ]

6 голосов
/ 27 марта 2012

Ответ от @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
});

Очевидно, способ, которым я передаю данныеЭто зависит от языка, но остальные должны быть полезны независимо от вашей ситуации.

0 голосов
/ 08 августа 2013

Вы можете решить проблемы с оптимизацией / сборкой, отключив bootstrapData в вашем build.js Как это:

paths: {
    bootstrapData: "empty:",
0 голосов
/ 04 ноября 2011

Не уверен, что мой метод - лучшая практика, но я делаю что-то очень похожее на то, что вы делаете, за исключением того, что вместо того, чтобы вставлять загруженные модели в глобальный объект, я создаю определение для него на своей HTML-странице:

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

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

    });
</script>

тогда у меня есть js-файл с именем current.model, который может потребоваться другим модулям и выглядит так:

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

    return new Model(json);   
});
...