ractive
Version:
Next-generation DOM manipulation
67 lines (53 loc) • 1.7 kB
HTML
<html lang='en-GB'>
<head>
<meta charset='utf-8'>
<title>SAMPLE | Ractive.js sandbox</title>
<!-- CSS -->
<link rel='stylesheet' href='../_sandbox.css'>
<!--[if lte IE 8]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<a href='../'>«</a> <h1>SAMPLE</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'>
<h2>Hello {{foo}}!</h2>
<p>The sandbox is useful for testing things out during development - you can try out new features without having to rebuild the library every time you add a <code>console.log()</code> statement.</p>
<ol>
<li>Copy the <code>sample</code> folder and give it a unique name (which might describe the feature, or be a GitHub issue number)</li>
<li>Replace SAMPLE with the same name</li>
<li>Edit the template block and the code at the bottom of the page</li>
<li>That's it! You're ready to go.</li>
</ol>
</script>
<!-- JS -->
<script src='../require.js'></script>
<script>
var ractive;
// 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: 'main',
template: '#template',
data: {
foo: 'world'
}
});
});
</script>
</body>
</html>