Unbound variables evaluated in template rendering context might be bound to DOM elements #155

lincolnq · 2011-09-29T14:23:13Z

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>

BorisMoore · 2011-09-29T20:10:12Z

IE will create global vars for ID'd elements. If this is in IE, this will be the reason... Not a bug in tmpl. But you have to avoid have ids with the same name as data variables you are testing for. This can also break regular javascript if you test for undefined on something which has the same name as an ID for an element.

lincolnq · 2011-09-29T22:26:40Z

Ah, sorry - I didn't realize it was browser specific. Firefox doesn't reproduce, but Chrome does. Don't have an IE to test with.

rdworth · 2011-10-08T06:27:01Z

Thanks for taking the time to submit this issue. Just wanted to let you know this plugin is no longer being actively developed or maintained by the jQuery team. See README for more info.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Unbound variables evaluated in template rendering context might be bound to DOM elements #155

Unbound variables evaluated in template rendering context might be bound to DOM elements #155

lincolnq commented Sep 29, 2011

BorisMoore commented Sep 29, 2011

lincolnq commented Sep 29, 2011

rdworth commented Oct 8, 2011

Unbound variables evaluated in template rendering context might be bound to DOM elements #155

Unbound variables evaluated in template rendering context might be bound to DOM elements #155

Comments

lincolnq commented Sep 29, 2011

BorisMoore commented Sep 29, 2011

lincolnq commented Sep 29, 2011

rdworth commented Oct 8, 2011