How to generate RDF/XML using a template in javascript?

Question

I have some working Javascript code that generates an RDF/XML document using variables picked up from HTML fields:

...
  peopleDoap += "   <foaf:name>" + person_name + "</foaf:name>\n";
  if (person_url != "") {
    peopleDoap += "   <foaf:homepage rdf:resource=\"" + person_url + "/\"/>\n";
  }
  if (person_pic != "") {
    peopleDoap += "   <foaf:depiction rdf:resource=\"" + person_pic + "/\"/>\n";
  }
...

It's hard, looking at this code, to get any sense of what the output will look like (especially as this code is scattered amongst sub functions etc).

I'm wondering if there is an easy way that would enable me to have something like this:

...
<foaf:name>%person_name%</foaf_name>
  <foaf:homepage rdf:resource="%person_url%"/>
  <foaf:depiction rdf:resource="%person_pic%"/>
...

And then some substitution code. One slight complication is if fields are left blank, I will want to not generate the whole element. Ie, if person_url='', the above should generate as:

...
<foaf:name>%person_name%</foaf_name>
  <foaf:depiction rdf:resource="%person_pic%"/>
...

I guess I could do this fairly naively by defining the template as a huge string, then performing a bunch of replaces on it, but is there anything more elegant? Mild preference for native Javascript rather than libraries, but happy to be convinced...

(Btw, yes, since this is RDF/XML, maybe there is a smarter way using some kind of RDF library. If you want to address that of the question instead, that's ok with me.)

Code is here .

Also, this is a widget running on a Jetty server. I don't think server-side code is an option.

Answer 1

I recommend using:

1. jQuery Templates
2. Mustache
3. John Resig's Micro-Templating

jQuery Templates are very powerful and nicely integrated with jQuery. That means that you can do things like this:

$.tmpl("Hello ${n}", {n: "World"}).appendTo('h1');

for the most simple stuff, or define templates in your HTML inside special script tags with custom MIME types, compile them, populate them with JSON data from AJAX calls, etc.

Answer 2

To add a bit of follow-up, I did implement John Resig's Micro-Templating (actually the refined version I posted earlier). However, I then backpedalled a bit. I found implementing control structures in the template is less readable than outside:

...
 '<description xml:lang="en">@description</description>';
if (homepage) t += 
  '<homepage rdf:resource="@homepage"/>';
...

rather than:

...
 '<description xml:lang="en"><#= description #></description>' +
'<# if (homepage) { #>' + 
  '<homepage rdf:resource="<#= homepage =>"/>' +
'<# } #>';
...

I also ditched the microtemplating code for a simple substitution of variables, using @var rather than <# var #>.

Readability of templates like this is really critical, so I've done everything I could think of. In particular, keeping the javascript outside of the template lets syntax highlighting work, which is valuable to me.

That John Resig post also suggested burying the template in your HTML, in a but I preferred to keep it in my javascript, which is a separate .js.