Binding AJAX data to html list template

Question

I'd like a functionality such as binding that is in silverlight, but this works for html and ajax calls.

I retrieve an array of the following objects from the server which is the user information whose class looks like the following:

public class User{
    public int UserId;
    public string ImgUrl;
    public string UserName;
}

If I have a List Item Template like the following:

<div id="{USERID}">
    <img src="{ITEM_IMAGE_URL}" />
    <span>UserName: </span><span>{USERNAME}</span>
</div>

Is there a way in javascript/Jquery do easily bind the data to this item template?

Thank You

Answer 1

Rick Strahl has a pretty good post on options for client side templating with JQuery

Answer 2

Take a look at this parseTemplate Jquery extension walk through. It also has a fully functional project you can download and run. The sample works great.

  var output = $('#MyTemplate').parseTemplate(json);
                        $('#MyTemplateOutput').html(output);

It uses this syntax for the templates.

<td id="CustomerRow_<#= i.toString() #>">
 <#= cust.FirstName #>
</td>