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>
2 Answers, 1 is accepted
0
FlexDigital
Top achievements
Rank 1
Rank 1
answered on 24 Apr 2013, 07:26 PM
I've actually gotten around this in my own project by commenting out everything in the template and then trimming it.
<script id="exampleTemplate" type="text/x-kendo-template"><!--
...
--></script>
and then in your JS:
var template = kendo.template($('#exampleTemplate').html());
var rendered = template(model);
rendered = rendered.substr(4, rendered.length - 7);
gets you your html that you can then inject into the DOM.
<script id="exampleTemplate" type="text/x-kendo-template"><!--
...
--></script>
and then in your JS:
var template = kendo.template($('#exampleTemplate').html());
var rendered = template(model);
rendered = rendered.substr(4, rendered.length - 7);
gets you your html that you can then inject into the DOM.
0
John
Top achievements
Rank 1
Rank 1
answered on 24 Apr 2013, 08:01 PM
Neat hack.
Still, the Kendo Helpers (which I chose not to use), run into this problem a lot (I found many threads on the forums demonstrating this problem, where people wanted to put a ListView inside a Grid, and it did not work. Thankfully, I stayed away from the MVC Helpers and don't even use the MVC DLL in my MVC application, as I did not want to over-abstract things.
Anyway, Basically, Kendo templates should be composable.
Still, the Kendo Helpers (which I chose not to use), run into this problem a lot (I found many threads on the forums demonstrating this problem, where people wanted to put a ListView inside a Grid, and it did not work. Thankfully, I stayed away from the MVC Helpers and don't even use the MVC DLL in my MVC application, as I did not want to over-abstract things.
Anyway, Basically, Kendo templates should be composable.