why is tmpl un-"javascript"

[trans]

Why go to the trouble of creating a sub-syntax of javascript to shoehorn into templates? e.g. why

{{if foo==bar}}

{{else}}

{{/if}}

rather than idiomatic javascript like (Micro-Templating):

<% if (foo==bar) { %>

<% } else { %>

<% } %>

The former might be a bit more concise, but having to translate pseudo-javascript has to slow things down. And worse still it limits us to only a small subset of available javascript functions. Why hobble things like this?

I wouldn't normally care except tmpl is becoming a standard feature of jquery, and giving everything I've read including benchmarks, I'm not keen about it.

[benatkin]

Because curly braces mixed with angle brackets is ugly. Case in point: your example is wrong.

[alekstorm]

I think you've misunderstood the templating language. How is only a "small subset" of functions available? The text immediately after the if is copied directly into a Javascript if (cond) statement, no matter how complex it may be.

The $.template() function allows users to pre-compile templates for later, repeated use, so any difference in speed would only be apparent during the compilation step.

[trans]

@benatkin well, javascript is ugly. Adding more syntax memes isn't going to help that.

@alekstorm but you can you put arbitrary javascript between {[ }}, e.g. set a counter ?

[alekstorm]

As far as I know, yes. Please provide an example on http://jsfiddle.net/ if you find an expression that can't serve as an argument to an {{if}} statement (other than something containing }}, of course).

[benatkin]

@trans Well this is one particular template language. Whether or not jQuery should have adopted a template language is debatable. At least they don't try to compel everyone to use it. It's also debatable whether they picked the best kind of template engine. The kind you're referring to, ejs, is available in several different incarnations. I like ejs, and I might prefer ejs-style templating to jquery-tmpl, but I'm glad they at least went with something closer to ejs than mustache.

I agree that the curly braces and angle brackets mixed aren't a serious problem. It's one valid approach. It has a drawback of looking a bit messy to some.

I hope you find a client-side templating setup that you're comfortable with.

[trans]

@alekstorm

Well, I meant something like {{ var a = 0; }}.

@benatkin

Thanks. I was somewhat hopeful that there were reasons why tmpl's approach might be considered better --especially in the light of the fact that jQuery is making it official.

I am using jqote2 presently and I am reasonably satisfied. I thought about switching to tmpl b/c it is becoming standard --obviously there's a compulsion towards defacto framework. But, both speed and the potential limitations I mentioned before discouraged me from doing so and made me wonder, "why tmpl"?

[alekstorm]

Pull request #128 (which I submitted) adds a {{set}} tag for variable assignment. In the meantime, you can do ${var a = 0, ''}. Beyond that, I can't imagine any Javascript syntax that wouldn't be available in jQuery templates.

[trans]

What's the , '' part for?

[trans]

Will {{set}} make it in? B/c I can't seem to get the var thing to work.

[alekstorm]

Good question. Every assignment in Javascript returns the value of the right-hand side - the value of var foo = 5 is 5, which is why you can do bar = (foo = 5). Therefore, using ${var a = 0} in a template would output 0 in the middle of the HTML. If we still want to perform the assignment, but return a different value, we can suffix the statement with a comma, followed by another expression - in this case, the empty string ''.

This is a hack that only developers of at least intermediate ability would think of, which is why we need a {{set}} tag.

[trans]

Ah, interesting. That makes sense. I'll add my +1 to the {{set}} feature, as I concur with you.

Still can't get the var bugger to work in my case though.

    {{if modules}}
      {{each(i,x) modules}}
        ${var doc = Rebecca.documentation_by_key[x],''}
        <li class="${doc['!']}"><a href="${doc.id}">${doc.name}</a></li>
      {{/each}}
    {{/if}}

Where Rebecca is my project's toplevel object. In firebug console I'm getting:

syntax error
  em):(modules)),function(i,x){with(this...r doc = Rebecca.documentation_by_key[x

[trans]

Trick was not to use var at all.

Thanks for the help.