The below example demonstrates clearly what is going on. As far as I can tell, the evaluation of {{= errr}} in the template language searches the template data, and then searches the DOM for an element with id matching the name of the variable. I expected the variable to be undefined at this point (and therefore also fail the '{{if errr}}').
Unfortunately, after trying to debug, I have no idea why it is doing this.
I will work around it with $data.err, but this was surprising behavior that seems like a bug to me.
<!doctype html>
<html>
<div id="errr" style="display:none;">The presence of this div in the page affects template rendering</div>
<hr>
<p>The test template which refers to 'errr' will be rendered in the below div, with the context {'ok': 'ok'}
</p>
<div id="contents-ok">
</div>
<p>The test template which refers to 'errr' will be rendered in the below div, with the context {'errr': 'you failed'}
</p>
<div id="contents-err">
</div>
<hr>
<p>The test template which refers to 'errr2' will be rendered in the below div, with the context {'ok': 'ok'}
</p>
<div id="contents2-ok">
</div>
<p>The test template which refers to 'errr2' will be rendered in the below div, with the context {'errr2': 'you failed'}
</p>
<div id="contents2-err">
</div>
<hr>
<p>The test template which refers to '$data.errr' will be rendered in the below div, with the context {'ok': 'ok'}
</p>
<div id="contents3-ok">
</div>
<p>The test template which refers to '$data.errr' will be rendered in the below div, with the context {'errr': 'you failed'}
</p>
<div id="contents3-err">
</div>
<script id="test-with-errr-ref" type="text/x-jquery-tmpl">
<p>Template rendering... {{if errr}}there was some errr: {{= errr }}
{{else}}there was no errr
{{/if}}</p>
</script>
<script id="test-with-errr2-ref" type="text/x-jquery-tmpl">
<p>Template rendering... {{if errr2}}there was some errr2: {{= errr2 }}
{{else}}there was no errr2
{{/if}}</p>
</script>
<script id="test-with-data-errr-ref" type="text/x-jquery-tmpl">
<p>Template rendering... {{if $data.errr}}there was some $data.errr: {{= $data.errr }}
{{else}}there was no $data.errr
{{/if}}</p>
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js" type="text/javascript"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function($) {
$.tmpl($("#test-with-errr-ref"), {'ok': 'ok'} ).appendTo("#contents-ok");
$.tmpl($("#test-with-errr-ref"), {'errr' :'you failed'} ).appendTo("#contents-err");
$.tmpl($("#test-with-errr2-ref"), {'ok': 'ok'} ).appendTo("#contents2-ok");
$.tmpl($("#test-with-errr2-ref"), {'errr2':'you failed'} ).appendTo("#contents2-err");
$.tmpl($("#test-with-data-errr-ref"), {'ok': 'ok'} ).appendTo("#contents3-ok");
$.tmpl($("#test-with-data-errr-ref"), {'errr':'you failed'} ).appendTo("#contents3-err");
});
</script>
</html>
The below example demonstrates clearly what is going on. As far as I can tell, the evaluation of {{= errr}} in the template language searches the template data, and then searches the DOM for an element with id matching the name of the variable. I expected the variable to be undefined at this point (and therefore also fail the '{{if errr}}').
Unfortunately, after trying to debug, I have no idea why it is doing this.
I will work around it with $data.err, but this was surprising behavior that seems like a bug to me.