templating/partials with jquery?

Question

I want to generate something similar to a facebook wall type effect and everytime a post is created the wall is updated. I have built out how i would like the css/html to look with php but i want to do it through ajax now.

My question- Is their such a thing as jquery partials? like a view i can push into my html page. As my update statement has gone from

sel.prepend('<li id="'+response[i].post_id +'"> ' + response[i].title + '</li>');   

With my html below it will take a bit more to update the page

Post Appearance imgs/t_silhouette.jpg"/> Users Name title?> img_url?>'/>*/?> img_url?>"/> link?>">link_title?> link_caption?> message?> /imgs/cog.gif') no-repeat;margin-right:5px;"> Like · Comment · 7 March at 19:08 via APPNAME

Answer 1

You can use http://handlebarsjs.com/ The syntax is very simple. You have to define a template like this

<script type="text/x-handlebars" id="people-template">
  <ul>
    {{#each people}}
        <li >Name: {{name}} : Location: {{location.city}}</li>
    {{/each}}
 </ul>
</script>

Then you can use it like

 var context= {
   people: [
      { name: "John Doe", location: { city: "Chicago" } },
      { name: "Jane Sinha", location: { city: "New York"} },
      { name: "Name Test", location: { city: "LA"} }  
    ]
  };

var template = Handlebars.compile($("#people-template").text());
var html = template(context);
$(document.body).html(html);

Working Fiddle