jquerytemplatesjquery-pluginsjquery-templates

How do I render a jQuery.tmpl Template to a String?


The documentation for jquery.tmpl uses .appendTo to insert the template into the DOM during the rendering process:

$.tmpl( myTemplate, myData ).appendTo( "#target" );

I am attempting to convert an existing app from another templating engine, and my code needs to render a template into a string first before it is added to the DOM. Is this possible? How would that be done?


Solution

  • jQuery Templating provides $.template() (see description in source code) - it returns array of strings after evaluating cached template with your data. I am writing from scratch (and from experiments in Chrome's console), but you'll get the whole idea.

    1. Create and cache a named template function

      $("template-selector").template("template-name");
      
    2. Get your template function and invoke it with your data

      var tmpl = $.template("template-name"); // template function
      var strings = tmpl($, {data: {<your data here>}}); // array of strings
      var output = strings.join(''); // single string