Rendering the results

We'll be using Selmer to render the Recently Added albums. We'll then display the rendered results instead of the crazy raw JSON.

Selmer templates, to refresh your memory, are stored in the resources/templates directory. As you may have guessed by now, I appreciate a nicely organized tree structure. So instead of throwing the recently-added template in with the rest of our templates, we'll create a new albums directory and house our album-related templates there:

  1. Create a new directory, albums, in resources/templates.
  2. Create a new Selmer template for our recently added albums, resource/templates/albums/recently-added.html, with the following content:
    {% extends "templates/base.html" %}       <!-- 1 -->
{% block content %}                       <!-- 2 -->
<h1>Recently Added</h1>
<ol class="albums">
    {% for a in albums %}                 <!-- 3 -->
    <li>
        <div class="artist"><a href="/albums/{{a.artist}}">{{a.artist}}</a></div>
        <div class="album-name">{{a.album_name}}</div>
        <div class="release-date">{{a.release_date}}</div>
    </li>
    {% endfor %}
</ol>
{% endblock %}

The Selmer template we created is pretty basic. We're simply extending our base.html template (1), and providing content for the content block (2). For the actual content, we're using the Selmer for iterator (3) to render a list-item for each of the recently added albums, and then rendering the values of the various fields in each album.

Note

Consult Chapter 4, URL Routing and Template Rendering, if you need a little refresher on the basics of Selmer templates.

If you refresh the /albums/recently-added route in your browser, you'll find that it's... still JSON. That's because we're not yet rendering the previous template. Let's do that now:

  1. Back in the hipstr.routes.albums namespace, create the following function (which invokes the Selmer rendering engine on our new template):
    (defn recently-added-page
  "Renders out the recently-added page."
  []
  (layout/render "albums/recently-added.html"
     {:albums (album/get-recently-added)}))
  2. Adjust our /albums/recently-added route to use the recently-added-page function, instead of the (album/get-recently-added) form:
    (GET "/albums/recently-added" [] (recently-added-page))

Now refresh the /albums/recently-added route in your browser. You'll see the following gorgeous bit of HTML design genius:

Rendering the results
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.12.162.37