Ajax request is made, it succeeds, and then as a consequence we need to update the page, to show the user the request was successful, or to perhaps show their data. Most obvious example, Ajax comments. User fills in form.Clicks “submit button”.POST request made to save data to database.DOM is updated with the user’s comment displayed. One way you might go about this is like so: //imagine at this point you've made the Ajax req, data is saved //this code executes on success var commentWrap = $("ul"); var newComment = "<li><span>" + data.username + "</span>" + "<div>" + data.comment "</div></li>"; commentWrap.append(newComment); There’s a few way of doing things, but the key thing I’m getting at here is that horrible string that we create to insert into the DOM.
When you’ve got more than one tag & one variable, it quickly gets ridiculous, messy & down right silly. Handlebars, loading external template files. Dynamic Gist Embedding · GitHub.