ractive-load demo 2

App.html

<h1>hello {{name}}!</h1>

<style>
	h1 { color: red }
</style>

data.json

{
	"name": "nadja"
}

get.js

function get ( url ) {
	return new Promise( function ( fulfil, reject ) {
		var xhr = new XMLHttpRequest();

		xhr.open( 'GET', url );

		xhr.onload = function () {
			fulfil( xhr.responseText );
		};

		xhr.onerror = reject;

		xhr.send();
	});
}

index.html

<main></main>

<script src='http://cdn.ractivejs.org/latest/ractive.js'></script>
<script src='https://rawgit.com/ractivejs/ractive-load/master/dist/ractive-load.js'></script>
<script src='get.js'></script>

<script>
	Promise.all([
		Ractive.load( 'App.html' ),
		get( 'data.json' ).then( JSON.parse )
	]).then( function ( results ) {
		var App = results[0];
		var data = results[1];

		new App({
			el: 'main',
			data: data
		});
	});
</script>