Short and sweet: Please show me how I can nest templates.
Example of what I want to do:
I want to dynamically include in a jQuery Tipped tooltip a select tag
and then call
on that tag. I am struggling to come up with a clean way to do this.
Full-blown JSFiddle:
The following JSFiddle demonstrates that script tags cannot be nested in KendoUI templates: http://jsfiddle.net/johnzabroski/NHG3d/10/
Analysis:
I know why this doesn't work (see below), but I can't figure out a clean alternative.
I even tried a hack [ http://www.willmaster.com/blog/javascript/nested-javascript.php ] to inject a script tag into the template via document.write(string): http://jsfiddle.net/johnzabroski/uy86N/7/
This isn't even clean, and it did not work.
After I built this demonstration, I thought it would be a good idea to check what the HTML5 specification says [1], and also ran my markup [3] through the W3C's experimental HTML5 validator [2]. It is not really clear from the HTML5 spec what the behavior should be. The spec mentions something about nested scripting tags in the parsing model overview [ http://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html#overview-of-the-parsing-model ], but then does not go on to define what that means. Meanwhile, the grammar for script tags seems to suggest you cannot nest script tags directly as I have done below [3]. This is confirmed by how Chrome parses my JSFiddle examples. After the first closing script tag, it treats the whole as closed, and then treats the Hello, World! DIV as if it was outside the script tag.
[1] http://www.w3.org/html/wg/drafts/html/master/scripting-1.html#scriptingLanguages
[2] http://validator.w3.org/check
[3]
<!DOCTYPE html>
<head>
</head>
<body>
<script type="text/plain" id="example">
<script type="text/javascript">
<!--
$("#example-container select").select2();
-->
</script>
<div>Hello, World!</div>
</script>
</body>
Example of what I want to do:
I want to dynamically include in a jQuery Tipped tooltip a select tag
<
select
id
=
"example"
>
$(
"#example"
).select2();
Full-blown JSFiddle:
The following JSFiddle demonstrates that script tags cannot be nested in KendoUI templates: http://jsfiddle.net/johnzabroski/NHG3d/10/
Analysis:
I know why this doesn't work (see below), but I can't figure out a clean alternative.
I even tried a hack [ http://www.willmaster.com/blog/javascript/nested-javascript.php ] to inject a script tag into the template via document.write(string): http://jsfiddle.net/johnzabroski/uy86N/7/
This isn't even clean, and it did not work.
After I built this demonstration, I thought it would be a good idea to check what the HTML5 specification says [1], and also ran my markup [3] through the W3C's experimental HTML5 validator [2]. It is not really clear from the HTML5 spec what the behavior should be. The spec mentions something about nested scripting tags in the parsing model overview [ http://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html#overview-of-the-parsing-model ], but then does not go on to define what that means. Meanwhile, the grammar for script tags seems to suggest you cannot nest script tags directly as I have done below [3]. This is confirmed by how Chrome parses my JSFiddle examples. After the first closing script tag, it treats the whole as closed, and then treats the Hello, World! DIV as if it was outside the script tag.
[1] http://www.w3.org/html/wg/drafts/html/master/scripting-1.html#scriptingLanguages
[2] http://validator.w3.org/check
[3]
<!DOCTYPE html>
<head>
</head>
<body>
<script type="text/plain" id="example">
<script type="text/javascript">
<!--
$("#example-container select").select2();
-->
</script>
<div>Hello, World!</div>
</script>
</body>