Best practise for rendering views pulled via AJAX in to existing DOM tree

Question

I imagine this is a common scenario:

You have a list of items in a page, for (a trivial) example:

<ul class="items">
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item">Item 3</li>
</ul>

A button exists that allows you to load in 3 more items via AJAX — the 'easy' way to do this is to just return the HTML of the 3 new items and then inject them in to the DOM.

However, if we wish to do some client-side manipulation of this data, we then have to parse the returned HTML, manipulate the data and then re-template it and then inject in to DOM.

I would imagine, for less trivial applications, the server would return the data in JSON format ready to be manipulated and then templated. However, you have redundancy now with your 'template' existing both server-side and in your client-side logic. Furthermore, if you are using something like Backbone to handle the view/model and maybe Mustache or something for the templating it becomes more complicated.

How do we handle this redundancy? Have the server return a template, too?

Answer 1

I'd be inclined to keep all data processing and rendering on the server, due not just to redundancy, but to separation of concerns. If you want to render against different data or a different template, then send a modified request which returns HTML that you can directly insert without having to munge it.

Answer 2

An approach, could be to generate the js dinamically (on server-side): generating a var containing the first 3 elements formatted as json, then call the function which add the lis on load.

This way, you will avoid redundancy and create client-side manipulation.