(BUG/Limitation) Templates cannot include any script tag.

3 posts, 0 answers
  1. John
    John avatar
    3 posts
    Member since:
    Mar 2013

    Posted 24 Apr 2013 Link to this post

    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
    <select id="example">
    and then call
    $("#example").select2();
    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>
  2. FlexDigital
    FlexDigital avatar
    5 posts
    Member since:
    Jul 2012

    Posted 24 Apr 2013 Link to this post

    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.
  3. Kendo UI is VS 2017 Ready
  4. John
    John avatar
    3 posts
    Member since:
    Mar 2013

    Posted 24 Apr 2013 Link to this post

    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.
Back to Top