Dynamically replacing simple DOM element with a template, processed with web-service's result values

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

I think a possible answer is in your code, namely the end of the query string: &callback=. Define a callback function to parse the returning JSON data and render your template.

As an aside, your "model" should not have "view" attributes, e.g. class names. Perhaps this is just an example and I'm being picky.

Answer 2

Have you looked at this StackOverflow question?

JQuery templating engines