nicolezhu/recompiler.html

## recompiler.html
<!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>
	<!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>