Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!doctype html>
<html lang='en-GB'>
<head>
<meta charset='utf-8'>
<title>Book Concierge</title>
</head>
<body>
<h1>Book Concierge</h1>
<!--
1. This is the element we'll render our Ractive to.
-->
<div id='container'></div>
<!--
2. You can load a template in many ways. For convenience, we'll include it in
a script tag so that we don't need to mess around with AJAX or multiline strings.
Note that we've set the type attribute to 'text/ractive' - though it can be
just about anything except 'text/javascript'
-->
<script id='template' type='text/ractive'>
{{#partial tag}}
<span class="tag"><a href="#/tag/{{slug}}">{{name}}</a></span>
{{/partial}}
{{#each books}}
<div class="book">
{{#if image}}
<div class="book-cover">
<img src="{{image}}" />
</div>
{{/if}}
<div class="book-text">
<h4>{{title}}</h4>
<p class="author">by {{fullName(author)}}</p>
<p class="tags">
{{#each tags}}
{{>tag}}
{{/each}}
</p>
<p class="review">{{review}}</p>
<p class="reviewer">Recommended by {{reviewer}}</p>
</div>
</div>
{{/each}}
</script>
<!--
3. You can always get the most recent stable version from the URL below.
If you want the newest features (unstable!), use the 'edge' version instead:
http://cdn.ractivejs.org/edge/ractive.min.js
If you need IE8 support, change 'ractive' to 'ractive-legacy'.
-->
<script src='http://cdn.ractivejs.org/latest/ractive.min.js'></script>
<!--
4. We've got an element in the DOM, we've created a template, and we've
loaded the library - now it's time to build our app.
-->
<script>
var ractive = new Ractive({
// The `el` option can be a node, an ID, or a CSS selector.
el: '#container',
// We could pass in a string, but for the sake of convenience
// we're passing the ID of the <script> tag above.
template: '#template',
// Here, we're passing in some initial data
data: {
books: [
{
image: 'images/homegoing.jpg',
title: 'Homegoing',
author: { firstName: 'Yaa', lastName: 'Gyasi'},
tags: [
{ name: 'Historical fiction', slug: 'historical-fiction' },
{ name: 'Realistic fiction', slug: 'realistic-fiction' },
{ name: 'Staff picks', slug: 'staff-picks' }
],
review: 'A stunning book that covers continents and generations!',
reviewer: 'Nicole Zhu'
},
{
title: 'Bad Feminist',
author: { firstName: 'Roxane', lastName: 'Gay'},
tags: [
{ name: 'Memoir', slug: 'memoir' },
{ name: 'Essays', slug: 'essays' },
{ name: 'Staff picks', slug: 'staff-picks' }
],
review: 'Insightful, reflective, and funny — a must-read!',
reviewer: 'Nicole Zhu'
}
],
fullName: function(author) {
return author.firstName + ' ' + author.lastName;
}
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.