CODEWITHSUNDEEP
jqueryjsrender
Ajay Singh Beniwal
Ajay Singh Beniwal

Reputation: 19037

Multiple Templates in one file JSRender

I want to keep multiple templates in one external template file. But i dont know how to get one template from the whole file

Upvotes: 1

Views: 1756

Answers (2)

pedz
pedz

Reputation: 2349

There are two choices. Here is my old working method (which I have since moved away from). It is eseentially what Michel mentioned above:

$.when( $.get('<%= asset_path('t1.html') %>', null, null, 'html') ).done(function (data, status, jqXHR) {
    // data is a string.  $(data) turns into an array of HTML
    // elements.  Often it is just one but if we get them ganged
    // into one file, they will be more than one.
    $(data).each(function () {
        // We assume the outside element is just a container.  I
        // use a <script> tag but it can be anything I suppose.
        // The id of the container becomes the template's name
        // while the contents becomes the template.
        $.templates(this.id, $(this).html());
        return this;
    });
    $('.upd_apar_defs tbody').html($.render.template1({items: json_elements.items, offset: 0}));
}).fail(function (a, b, c) {
    alert('Someone is really unhappy');
});

The first arg to get is the URL. This is from a Rails project using SASS. asset_path is turned into a relative path to the t1.html path (none of which is pertinent to your question -- I'm just explaining what the code above is doing).

I've moved away from this and now split my templates into separate files but then gang them back together via the asset pipeline in Rails. When they are ganged back together they are wrapped with a call to $.template using the name of the file as the name of the template and the contents of the file as the template itself. Roughly I followed this:

https://github.com/erubboli/sprockets-jsrender

I redid it but essentially used most of his concepts. The result is a javascript file that you just load and the loading causes it to execute and define the templates.

My logic was this:

If you put multiple templates into the same file, just put a small wrapper around each and make the file a pure javascript file even if it appears to be mostly html and js-render. This is not hard to do, the editor can handle it pretty easily, and its relatively clear what you are doing.

Then you can leverage all the benefits of having a pure javascript file such as loading it via a tag in the head, caching it on the client side, compressing it, etc. The templates are ready to rock-n-roll at page load time saving the extra fetch.

HTH

Upvotes: 2

axel.michel
axel.michel

Reputation: 5764

Your template collection needs to have different script tags (as the default inline usage of jsRender). Then you can load the collection file, find the requested part and render it, should work somehow likd this: (not tested, just theoretical)

my.renderUtils = (function () {
  // your template file (contains a set of script tags with ids)
  var templateFile = "template/file.html";
    renderTemplate = function (templateSelector, targetSelector, data) {
      $.get(templateFile, null, function (templateCollection) {
        var template = $(templateCollection).find( templateSelector ), /* find the correct part from the collection */
            tmpl = $.templates(template), /* rendering process */
            htmlString = tmpl.render(data);
        if (targetSelector) {
          $(targetSelector).html(htmlString); /* add it to your target */
        }
        return htmlString;
      });
    };
    return {
      renderExternalTemplate: renderTemplate
    };
})()

// usage 
my.renderUtils.renderExternalTemplate("yourTemplateFilePartID", "#yourTargetSelector", {yourdata:''}});

Upvotes: 3

Related Questions