What options are there for building html from an ajax response?

What options or libraries are out there for building html from a returned ajax response?

Currently I am taking the json data I receive, building the html as a string, and using a jQuery DOM insertion function, but I have to think there is a better and more maintainable way out there to do what I am trying to do.

For example, I ha开发者_JAVA技巧ve a page with a list of projects, with just a thumbnail and title, which users can click on. Once a project is clicked and the json request comes back successfully, more detailed project information is shown. Currently I am doing something that is essentially:

build_project = function(data){
  var projectHTML = "<div id='projectData_"+data.id+"'>"+data.contents+"</div>";
  return projectHTML;
}

Then inserting it into the DOM where it needs to go. The problem arises when there is more than just one element, sometimes I'll have to create up to 6-10 different nested elements with stuff like the below cropping up:

    projectHTML += "</div>";
  projectHTML += "</div>";
projectHTML += "</div>";

I'm aware of mustache.js, but I'm not sure if that is exactly what I'm looking for or not - and whether there are any other options that I should investigate.

Thanks!

You are on the right track. Take a look at the jquery.tmpl library.

http://api.jquery.com/jquery.tmpl/

You can try http://knockoutjs.com/ alongside with JQuery templates.

"Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update dynamically (e.g., changing depending on the user’s actions or when an external data source changes), KO can help you implement it more simply and maintainably."

You can make a printf style method in JavaScript.

You can live dangerously and extend the String object (as luck would have it I wrote this a couple of days ago)...

String.prototype.printf =  function() {

    var theseArguments = Array.prototype.slice.call(arguments).reverse(),
        argumentsLength = theseArguments.length,
        str;

    str = this.replace(/%s/g, function() {
        return theseArguments[--argumentsLength];   
    });   

    return str;

};

jsFiddle.

...or simply make it a normal function, and perhaps faux namespace it as util.printf = function() { ... }.

Of course, the function above isn't really printf() (it handles string interpolation only), but you could extend it to do integers, floats, padding, etc.

If you are using ASP.Net and if you do not need the JSON result on the client (other than to do DOM-insertions) you could render the html on the server.

You could then take advantage of you programmning language functionality to build up the html.

Finally you return the HTML-string and append it to you DOM.

As an example you can create your DOM-elements like this:

var panel = new Panel();
var label = new Label { Text = data.contents };
panel.Controls.Add(label);

return panel.ToHtml(); //use stringwriter

This teqnique have proven very useful in several projects i have been involved in.

another option which maybe more maintainable, testable etc would be for your remote function itself (that your calling via ajax) to return the formatted html instead of the data. For example in MVC, e.g ASP.NET MVC, you can return a view and the script would take this data as is without having to manipulate it.

[AcceptVerbs((HttpVerbs.Get))]
    public ActionResult GetView(string param1)
    {
        var model = new ModelXXX;
        ...
        ...

        return View("ViewName", model);
    }