Passaggio di variabili bootstrap e JSON a require.js

Question

Qual è la procedura migliore per trasferire le variabili bootstrap all'interno della pagina di rendering (ad esempio dati JSON o variabili di configurazione) su require.js in modo che possano essere verificate per le dipendenze utilizzate?

Sembra che questo potrebbe essere fatto controllando l'oggetto window (cioè window.bootstrapped_models ma che non sembra molto ottimale

app.html -. Dati di esempio all'interno del documento HTML

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

app.js - esempio app using 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

Non so se il mio metodo è best practi ce ma faccio qualcosa di molto simile a quello che state facendo tranne che invece di sbattere i modelli bootstrap sull'oggetto globale, creo un definire per essa nella mia pagina HTML:

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

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

    }); 
</script> 

poi ho un file js chiamato current.model che può essere richiesto da altri moduli e si presenta così:

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

    return new Model(json); 
}); 

Answer 2

La risposta da @timDunham era utile, ma c'è sembrato un po 'troppo complicato per me. Giocando con require.js e Lithium (PHP MVC) ho trovato il seguente. È semplice e ha funzionato in ogni istanza in cui mi sono imbattuto.

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

Quale è quindi disponibile effettuando le seguenti operazioni:

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

Ovviamente il modo in cui sto portando i dati in è linguaggio specifico, ma il resto dovrebbe essere utile a prescindere dalla vostra situazione.

Answer 3

È possibile risolvere i problemi con optimize/costruire disabilitando il bootstrapData nelle build.js Ti piace questa:

paths: { 
    bootstrapData: "empty:",