Question

I am using jQuery templates to mark up my JSON. I am wondering if anyone has an elegant solution to precompile them into javascript on the server so as to keep the browser from having to do so each time.

I am aware of the following post:

pre-compile JavaScript templates to functions on project build

and I understand that I could use

https://github.com/wookiehangover/jquery-tmpl-jst

but I am hoping that there is something more elegant. For instance, how about an HttpModule that could be set to process request for *.jst files and would compile it and return back the resulting JS.

I’m not sure if this exist yet, but assuming if one could get the jquery-tmpl-jst project to run serverside, it seems fairly easy to build the HttpModule.

Any help is appreciated. If the module doesn’t exist, I will consider writing it if I can sort out how to get the actual compiling to work.

UPDATE

I just found this library. It isn’t an HttpModule, but it looks like it implements the jQuery template compiling serverside. Just not sure if it is fully implemented or not yet.

https://github.com/awhatley/jquery-tmpl.net

UPDATE

Well it looks like the library above is actually executing jQuery templates on the server in .Net so it never gets the javascript to the jQuery compiled format. Any ideas?

Answer 1

The first option is to use Cassette.Web (See documentation, get it with NuGet). Take in account that it will add about 6 dependent packages to your project as well. We did not need all this additional stuff so we decided to extract required part and it was quite a simple task:

So the second option is

1. Get some JS engine for .NET (we used Jurassic as Cassette.Web did)
2. Download JS extract from jQuery-tmpl plugin used in Cassette.Web.
3. Execute downloaded JS file in JS engine.
4. Execute “buildTmplFn” JS function in JS engine passing to it your template as an argument
5. Whoa-la, get a compiled template as a return value.

Example:

using Jurassic;
...
private static string CompileTemplates(string sourceDirectory)
{
    var resultBuilder = new StringBuilder();
    var scriptEngine = new ScriptEngine();

    scriptEngine.Execute(Properties.Resources.jqueryTmplCompiler);

    var templates = Directory.GetFiles(sourceDirectory, "*.htm?");
    if(templates.Count() > 0)
    {
        foreach (var filePath in templates)
        {
            Console.WriteLine("Compiling " + Path.GetFileName(filePath));
            string templateText = File.ReadAllText(filePath);
            string templateName = Path.GetFileNameWithoutExtension(filePath);
            string precompiledTemplate = scriptEngine.CallGlobalFunction<string>("buildTmplFn", templateText);
            resultBuilder.AppendFormat("$.template('{0}', {1});\n", templateName, precompiledTemplate);
        }
        Console.WriteLine("Templates successfully precompiled.");
    }
    else
    {
        ErrorExit("No templates found in Source Directory " + sourceDirectory);
    }

    return resultBuilder.ToString();
}

This example assumes that JS file downloaded at the second step is stored in resources of the current project.

Cheers