Skip to content

Instantly share code, notes, and snippets.

@dunglas dunglas/index.html.twig
Last active Dec 10, 2015

Embed
What would you like to do?
Chaplin.js boilerplate for Symfony (Twig)
{#
Part of the Dunglas' Symfony 2 / Chaplin.js tutorial
http://dunglas.fr/2012/12/utiliser-chaplin-js-et-backbone-js-avec-symfony-2-installation-et-configuration/
#}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chaplin Boilerplate Application</title>
<style>
body { font-family: sans-serif; }
</style>
</head>
<body>
<h1>Chaplin Boilerplate Application</h1>
<p>This Chaplin example provides an app scaffold using RequireJS as module loader. Handlebars is used as templating engine. The templates are loaded on demand using the RequireJS text plugin.</p>
<div id="page-container"></div>
{% javascripts '@DunglasChaplinDemoBundle/Resources/public/js/vendor/require-2.1.1.js' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
<script>
// Configure the AMD module loader
requirejs.config({
// The path where your JavaScripts are located
baseUrl: '{{ asset('bundles/dunglaschaplindemo/js/') }}',
// Specify the paths of vendor libraries
paths: {
jquery: 'vendor/jquery-1.8.2',
underscore: 'vendor/underscore-1.4.2',
backbone: 'vendor/backbone-0.9.2',
handlebars: 'vendor/handlebars-1.0.rc.1',
text: 'vendor/require-text-2.0.3',
chaplin: 'vendor/chaplin-1.0.0-pre-59cac06'
},
// Underscore and Backbone are not AMD-capable per default,
// so we need to use the AMD wrapping of RequireJS
shim: {
underscore: {
exports: '_'
},
backbone: {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
handlebars: {
exports: 'Handlebars'
}
}
// For easier development, disable browser caching
// Of course, this should be removed in a production environment
{% if app.environment == 'dev' %}, urlArgs: 'bust=' + (new Date()).getTime(){% endif %}
});
// Bootstrap the application
require(['hello_world_application'], function (HelloWorldApplication) {
var app = new HelloWorldApplication('{{ path('dunglas_chaplindemo_default_index') }}');
app.initialize();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.