jeffturcotte
3/12/2014 - 3:52 PM

RequireJS per page module

RequireJS per page module

Template.html
content_copyfile_download
<!doctype html>
<html>
	<head>
		<title>{{ title|title }}</title>
		<link rel="stylesheet" href="/styles/common.css" />
		<link rel="stylesheet" href="/styles/layout.css" />
	</head>
	<body>
		{{ include('header.html') }}

		{% block content %}
		{% endblock %}

		{{ include('footer.html') }}

		{# we set the script variable wherever we are rendering the template #}
		{# and twig adds it to the data-module attr below #}

		<script 
		    data-module="{{ script }}"
		    data-main="/scripts/app.js"
		    src="/scripts/require.js">
		    </script>
	</body>
</html>
app.js
content_copyfile_download
require.config({
	baseUrl: '/scripts/lib',
	paths: {
		app: '../app',
		jquery: 'jquery-1.11.0',
		handlebars: 'handlebars-v1.3.0',
		ckeditorCore: 'ckeditor/ckeditor',
		ckeditor: 'ckeditor/adapters/jquery'
	},
	shim: {
		ckeditor: {
			deps: ['jquery', 'ckeditorCore']
		},
		handlebars: {
			exports: 'Handlebars'
		}
	}
});

// this following snippet reads the data-module attribute and requires it

require(['jquery'], function($) {
	if (module = $('script[src$="require.js"]').data('module')) {
		require([module]);
	}
});