Provide a tool for pre-compiling templates

[borismoore]

Provide a tool for pre-compiling templates

[BorisMoore]

There are are few samples showing different ways of accessing template objects (compiled templates) - depending on whether the template was compiled from a string, or a script block, etc. - under this folder: https://github.com/BorisMoore/jsrender/tree/master/demos/variants.

Live demos here: https://github.com/BorisMoore/jsrender/tree/master/demos/variants.

The simplest is approach is var templateObject = jsviews.templates("htmlMarkupForTemplate");

Then you can call the render method of the templateObject.

[BorisMoore]

Yes, that could be a good idea, but it will probably need to wait until v1.0 has shipped.

[jeffrose]

Is the compiled template available somewhere? In Rhino, you could do something like this:

// Load jsrender
load( "jsrender.js" );

// Read template file
var template = readFile( "myTemplate.jsrender" );

// Compile template
jsviews.templates( "myTemplate", template );

// Access compiled template
var myCompiledTemplate = ; // ???

// Write compiled template to file
serialize( myCompiledTemplate, "myCompiledTemplate.js" );

[jeffrose]

I was a bit hasty with my previous example, but having said that this should work for anyone who is interested:

// Load jsrender
load( "jsrender.js" );

var
    // Read template file
    template = readFile( arguments[ 0 ] ),

    // Compile template
    compiled = jsviews.templates( template ),

    // Uneval compiled template to string
    code = uneval( compiled ),

    // Create file for compiled template code
    out = new java.io.FileWriter( arguments[ 1 ] );

out.write( code, 0, code.length );
out.flush();
out.close();

quit();

Assuming you name this code precompile.js you would run it in Rhino by executing:

java -cp js.jar org.mozilla.javascript.tools.shell.Main precompile.js myTemplate.jsrender myTemplate.js

[jeffrose]

Even with my updated example, there are a couple changes that need to happen for the code to run.

There are references to variables that no longer exist within renderContent() once the compiled template is separated from the rest of the code. Namely...

• TRUE
• FALSE
• View

TRUE and FALSE should obviously be true and false. View requires that jsv be recreated as it could either be window.jsviews or $.views. Then View can be extracted from it.

If those references were updated, this issue would be one step closer to a resolution.

The only other munging I've had to do deals with quirks in Rhino that someone using Node would not have.

[BorisMoore]

@jeffrose: I just made a related comment on Issue 143. Basically, you should be able to put render: $.fn.render to access renderContent)() in the correct context.

Also, I notice I missed your question above:

// Access compiled template
var myCompiledTemplate = ; // ???

But you figured that $.templates("a markup string") returns the compiled template. Named templates show up as 'expandos' on $.templates, such as $.templates.myNamedTemplate.

[jeffrose]

@BorisMoore I am trying to avoid tying our use of JsRender to jQuery. That being said, I notice you're setting a self variable in renderContent() to this. What are the expected values of this?

It looks $.fn is one expected value since you're checking for a .jquery property (correct me if I am wrong). What is the expected value if jQuery is not present?

[BorisMoore]

@jeffrose: RenderContent is used as the render method on any template, and also the renderContent of any registered tag, such as {{if}}. So you can get it from jsviews.tags.if.render, for example...

[lagosr]

With the latest release of Chrome for windows, they are forcing manifiest version 2 now, which means template pre-compilation is needed (barring use of an iframe, and use of a sandbox)
http://developer.chrome.com/extensions/manifestVersion.html
Borris, any chance of speeding up the availability of a pre-compilation tool?

[BorisMoore]

Not been able to get to this yet. Sorry, but I think it won't be something I can work out until after completing the current phase of significant updates to JsViews, heading for beta... But I will come back to it... I have some ideas around how to do it, and I agree that it is important.

[bkimmel]

You can totally use jsRender to do templates in Node...I've been doing it using just one simple trick; instead of running it as is, declare an empty object and shim it in jsRender's anonymous function like so;

var jsR = {};
(
//all the jsRender.js code.
)(jsR, null);

Now you can render templates in Node with this awesome library all night long

var msg = {"greeting" : "helloworld"}

jsR.jsviews.templates({
exampleTemplate: "span {{:greeting}} /span"
});

console.log( jsR.jsviews.render.exampleTemplate( msg ) ) //logs: span helloworld /span

Now you get to use jsRender in Node. game, set, match...if there is really enough demand, I would be happy to try and set this up as an npm package or something so you can just require() and shoot, let me know.

[BorisMoore]

Planned for V1 or V1.1. See also #164

[jeremychone]

+1 on this. I did a little lesscss and handlebars compiler (http://britesnow.com/html5/jcruncher) and would be happy to add jsrender support.

Also, we would need a jsrender-runtime.js, very small, with just the "runtime" similar to handlebars-...runtime...js. (handlebars runtime is 3KB).

[BorisMoore]

Yes, sounds like a great plan...

[gtwilliams03]

I think this would also be helpful for using jsRender with the Twitter https://github.com/twitter/typeahead.js/ plugin. It requires a precompiled template ("template" property) and a templating "engine" (see ENGINE below). I would love to use JsRender for this - but I might need to use Hogan in parallel since I can't figure out how to get the jsRender templating engine to work with this.

Template Engine Compatibility

Any template engine will work with typeahead.js as long as it adheres to the following API:

// engine has a compile function that returns a compiled template
var compiledTemplate = ENGINE.compile(template);

// compiled template has a render function that returns the rendered template
// render function expects the context to be first argument passed to it
var html = compiledTemplate.render(context);

Check out Hogan.js if you're looking for a compatible mustache templating engine.

[BorisMoore]

@gtwilliams03: Can you simply wrap jsrender:

    var engine = {
            compile: function(template) { return $.templates(template); }
        };

    var html = engine.compile("Value: {{:value}} ...").render({value: "some value "});

The template already has a render method...

ADDED LATER

In fact, (see http://stackoverflow.com/questions/25237610/how-to-use-twitter-typehead-js-with-jsrender-compile-function), because the templates() method works has no dependency on its context (this pointer), this can be done even more simply:

var engine = {
      compile: $.templates
   };

$('.product-typeahead').typeahead({
   ...
   engine: engine,
   local: [
      ...
   ]
}).on('typeahead:selected', function(event, datum) {
   ...
});

Or you can even extend $.templates to make it the engine (make it its own 'compile' method!):

$.templates.compile = $.templates;

$('.product-typeahead').typeahead({
   ...
   engine: $.templates,
   local: [
      ...
   ]
}).on('typeahead:selected', function(event, datum) {
   ...
});

Yet another alternative would be not to set the engine, but to use a suggestion template as in https://twitter.github.io/typeahead.js/examples/#custom-templates:

suggestion: $.templates('<p><strong>{{:value}}</strong> – {{:year}}</p>')

[gtwilliams03]

Boris: Simple and elegant - just like your whole jsRender system. It worked like a charm and now I am using jsRender with the Twitter typehead.js plugin.

[madantamang]

i need help
http://stackoverflow.com/questions/25237610/how-to-use-twitter-typehead-js-with-jsrender-compile-function

[BorisMoore]

@gtwilliams03: @mikmarkify I added some updated approaches to using JsRender with Twitter typehead, above.

[gtwilliams03]

@BorisMoore Thank you for your endless efforts to help us all out! I am copying in a sample of what I am using with Twitter typeahead.js which has worked very will and implements jsRender directly (I tried to slim down lots of stuff that was specific to my project to make this a pretty generic example):

[This code updated by BorisMoore based on discussion below]

var jsRender = {
    compile: $.templates
};

$("#txtTypeahead").typeahead({
    limit: 15,
    remote: {
        url: "/Home/Lookup?term=%QUERY",
        maxParallelRequests: 2,
        beforeSend: function (jqXhr, settings)
        {
            var temp = String($("#txtTypeahead").val());
            if (temp.length > 3)
            {
                $("#txtTypeahead").addClass("LoadingBackground");
                return true;
            } else
            {
                return false;
            }
        },
        complete: function ()
        {
        },
        filter: function (data)
        {
            $("#txtTypeahead").removeClass("LoadingBackground");
            // filter the returned data
            var ret = [];
            if (data != null && data.length > 0)
            {
                for (var i = 0; i <= data.length - 1; i++)
                {
                    var item = data[i];
                    ret.push({
                        value: item.Matter,
                        data: [item.Matter, item.Title],
                        hasData: item.Matter != null || item.Title != null
                    });
                }
            } else
            {
                ret.push({ value: "", data: [], hasData: false });
            }
            return ret;
        },
        cache: true,
    },
    template:
        "<div style=\"font-weight:bold\">"
            + "{{if hasData}}{{:value}}{{else}}No records located.{{/if}}"
        + "</div>",
    engine: jsRender
});

[BorisMoore]

@gtwilliams03: Thanks. What is your jsRender var? It could be defined as follows:

var jsRender = {
      compile: $.templates
   };

Is that what you have?

BTW (FWIW) you could also write:

template: 
"{{if hasData}}\
    <div style=\"font-weight:bold\">{{:value}}</div>\
{{else}}\
    <div style=\"font-weight:bold\">No records located.</div>\
{{/if}}"

or

template:
 "<div style=\"font-weight:bold\">\
    {{if hasData}}\
        {{:value}}\
    {{else}}\
        No records located.\
    {{/if}}\
</div>"

[gtwilliams03]

@BorisMoore Here is what I had in my project:

var jsRender = {
    compile: function (template) { return $.templates(template); }
};

And thank you for the simplified template format! (Of course, I should have known that...)

[gtwilliams03]

@BorisMoore I changed the statement above to your suggestion, and it worked just fine:

var jsRender = {
    compile: $.templates
};

[BorisMoore]

Great thanks - I updated the code in your comment higher up to include those changes - so folks don't need to read the whole thread...

[BorisMoore]

Browserify transform and {{clientTemplate}} support and full Node JsRender support are now available.

JsRender is now available natively as a Node module.

See https://www.npmjs.com/package/jsrender and https://github.com/BorisMoore/jsrender-node-starter