Question

M(model): HTML, V(view): CSS, C(Controller): JavaScript

Hi,

I’m maintaining a personal bookshelf (a list of books) in a simple static HTML document, ie:

<ul>
  <li class="book">Kitting tips and tricks</li>
  <li class="book">La Bonne Cuisine Of Madame E. Saint-Ange: The Essential Companion For Authentic French Cooking</li>
  <li class="book">Don't Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition</li>
</ul>

Ok, this is for the model part: just books titles entries (DB equivalent)

---

Now for presentational purposes, I would like to present it a bit differently… For example, I prefer showing the book’s cover rather its title as simple text, eg:

<li class="book"><img alt="Kitting tips and tricks" src=""></li>

For this, I use a web-service (Google Books API) to fetch book’s information, client-side(JSON):

$('.book').each(function(index, book){
  $.getJSON("http://books.google.com/books/feeds/volumes?alt=json-in-script&callback=?",
    {q: $(book).text()},
    function(data, textStatus) {
      // DOM manipulations: replacing book's title by its cover image
      $(book).empty().html('<img alt="' + data.feed.entry[0].title.$t + '" src="' + (data.feed.entry[0].link[0].href) + '"/>');
    }
  );
})

The problem is DOM manipulations can rapidly becomes complex, for example, if I also want to add author, editor, reviews…

So my question is: is there a way to define a sort of template for the final rendering of the book, eg something like:

 <li class="book"><img src="{cover}" alt="{title}"> by <address class="vcard"><span class="fn">{author}</span></address>...</li>

and processing it(client-side) with the web-service’s result values?

It makes me think about XSLT here, but I’m really not sure about its implementation over javascript. Do you have another idea?

Thanks for your suggestions.

Answer 1

Have you looked at this StackOverflow question?

JQuery templating engines