-
Notifications
You must be signed in to change notification settings - Fork 396
60 second setup
Артём edited this page Jul 30, 2013
·
16 revisions
Wiki ▸ 60 second setup123
Create a folder with a blank index.html page:
<!doctype html>
<html lang='en-GB'>
<head>
<meta charset='utf-8'>
<title>My blank page</title>
</head>
<body>
<h1>My blank page</h1>
</body>
</html>Download the latest released version of Ractive.js and put it in the same folder as index.html. Include it with a script tag just before the closing </body> tag:
<body>
<h1>My blank page</h1>
<script src='Ractive.js'></script>
</body>Then, add a container element to render a Ractive to:
<body>
<h1>My blank page</h1>
<div id='container'></div>
<script src='Ractive.js'></script>
</body>There are a number of different ways to load templates. For now, the easiest way is to use another script tag. Because we're specifying a type other than text/javascript, it won't be executed:
<body>
<h1>My blank page</h1>
<div id='container'></div>
<script id='myTemplate' type='text/ractive'>
<p>{{greeting}}, {{recipient}}!</p>
</script>
<script src='Ractive.js'></script>
</body>Everything is in place to create a Ractive. Add another script tag at the bottom:
<body>
<h1>My blank page</h1>
<div id='container'></div>
<script id='myTemplate' type='text/ractive'>
<p>{{greeting}}, {{recipient}}!</p>
</script>
<script src='Ractive.js'></script>
<script>
var ractive = new Ractive({
el: 'container',
template: '#myTemplate',
data: { greeting: 'Hello', recipient: 'world' }
});
</script>
</body>Open the page in a browser. You should see a 'Hello, world!' message. If you open the console and type ractive.set('recipient', 'Jim') the text will update.
That's it - you're in business.
- You could pass in a template string as the
templateoption, rather than the ID of a script tag containing the template. In that case, if your template is more than a couple of lines you'll probably want to keep it in a separate file and load it (e.g. with$.ajax, if you're using jQuery) - As your app grows in complexity, you'll want to keep your application code (i.e. the bit that calls
new Ractive()) in a separate file. You can also use Ractive with RequireJS. - Work your way through the tutorials to learn how to use Ractive. You can also consult the API reference.