Skip to content

Instantly share code, notes, and snippets.

Created June 20, 2017 03:26
What would you like to do?
<!doctype html>
<html lang='en-GB'>
<meta charset='utf-8'>
<title>Book Concierge</title>
<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>
{{#each books}}
<div class="book">
{{#if image}}
<div class="book-cover">
<img src="{{image}}" />
<div class="book-text">
<p class="author">by {{fullName(author)}}</p>
<p class="tags">
{{#each tags}}
<p class="review">{{review}}</p>
<p class="reviewer">Recommended by {{reviewer}}</p>
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:
If you need IE8 support, change 'ractive' to 'ractive-legacy'.
<script src=''></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.
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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment