ractive
Version:
Next-generation DOM manipulation
62 lines (49 loc) • 1.37 kB
HTML
<html lang='en-GB'>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>NAME_HERE | Ractive.js sandbox</title>
<!-- CSS -->
<link rel='stylesheet' href='../_sandbox.css'>
<!--[if lte IE 8]>
<script src="../html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<a href='../'>«</a> <h1>NAME_HERE</h1>
</header>
<main>
<p class='loading'>loading individual Ractive.js source files... please wait</p>
</main>
<footer>
<a href='http://ractivejs.org'>Ractive.js</a>
<a href='http://docs.ractivejs.org'>Docs</a>
<a href='http://twitter.com/RactiveJS'>Get help on Twitter @RactiveJS</a>
</footer>
<script id='template' type='text/ractive'>
<!-- template goes here -->
</script>
<!-- JS -->
<script src='../require.js'></script>
<script src='../debugRequire.js'></script>
<script>
var ractive, fixture;
fixture = document.getElementsByTagName( 'main' )[0]; // so we can copy and paste into test suite more easily
// Configure RequireJS to load Ractive from the src/ folder
require.config({ baseUrl: '../../src/' });
require([ 'ractive' ], function ( Ractive ) {
window.Ractive = Ractive;
// YOUR CODE GOES HERE
ractive = new Ractive({
el: fixture,
template: '#template',
data: {
foo: 'world'
}
});
});
</script>
</body>
</html>