ractive-load demo 1

App.html

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

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

<script>
	component.exports = {
		oninit: function () {
			get( 'data.json' )
				.then( JSON.parse )
				.then( data => this.set( data ) );
		}
	};
</script>

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>
	Ractive.load( 'App.html' ).then( function ( App ) {
		new App({
			el: 'main'
		});
	});
</script>