4

I was going to ask this question (until I found it was already asked) and now have the answer to that question:

It's better to request JSON from a PHP script and then wrap the results in HTML with JavaScript.

Now I have the unfortunate task of generating HTML with JavaScript to append to my document and am not sure how best to approach this.

With PHP I could simply store a HTML file and then use file_get_contents() and regex to replace some tokens with the relevant information, however I don't think it's that easy with JavaScript.

Some methods I have thought of:

  1. The repulsive approach. Generate a massive ugly string and then append that:

    var html = '<div class="comment">' +
    '<strong>' + author + '</strong>: ' +
    '<p>' + content + '</p>' +
'</div>';

$("#comments").append(html);

  2. Store the string somewhere and then use regex on that, which might look like this:

    var commentHTML = '<div class="cmt"><strong>{auth}</strong>: {cmt}</div>';

Is there a library/plugin that deals with this better maybe? Riddling my JavaScript with chunks of HTML stored in strings is something I'd really like to avoid. Maybe there is a similar method to what I mentioned I do using PHP? Can JavaScript read HTML files and store the content as a string?

Community
  • 1
  • 1
Marty
  • 37,476
  • 18
  • 87
  • 159

2 Answers2

4

Congrats, you just invented Mustache.js. Check it out: https://github.com/janl/mustache.js

var data = { author: "An Author", content: "Some content" };
var template = "<div class='cmt'><strong>{{author}}</strong>: {{comment}</div>";
var html = Mustache.render(template, data);
McGarnagle
  • 96,448
  • 30
  • 213
  • 255
  • 1
    Just the name makes it awesome. However is it possible to store the HTML in their own files? – Marty Apr 12 '12 at 03:35
  • @MartyWallace yes. you need AJAX to load them, then feed the response text to the `render()` – Joseph Apr 12 '12 at 04:11
4

You can inline templates as scripts with arbitary types

<script id="my-template" type="template">
    <div class="comment">
        <strong>%s</strong>:
        <p>%s</p>
    </div>
</script>

Writing a function to turn a "template" into a document fragment is trivial

function fragment(html) {
    var args = arguments,
        div = document.createElement('div'),
        i = 1

    div.innerHTML = html.replace(/%s/g, function(){
        return String(args[i++])
    })

    return div.firstChild
}

Using it is also trivial

fragment(document.getElementById("my-template").textContent, author, comment)
Raynos
  • 156,883
  • 55
  • 337
  • 385
  • Some reading that helped me understand this answer: [Explanation of ``](http://stackoverflow.com/questions/4912586/explanation-of-script-type-text-template-script) – Marty Apr 12 '12 at 04:09
  • This anti-pattern has been thoroughly [debunked](http://groups.google.com/group/comp.lang.javascript/browse_thread/thread/a8a08edfd21ea144/58ebef1a8c657792?lnk=gst&q=client-side+template#msg_222763cb2391c101). Avoid at all costs. –  Apr 12 '12 at 18:46
  • 1
    @MattMcDonald rather then linking an article made of 98% noise, would you like to use reason instead – Raynos Apr 12 '12 at 19:18