External Template Files

7 posts, 0 answers
  1. Burke
    Burke avatar
    41 posts
    Member since:
    Jun 2009

    Posted 26 Aug 2011 Link to this post

    Is it possible to put your template in an external. js file and then pull it into the page?

    <script src="/Scripts/template.js" type="text/x-kendo-template" id="details-n-actions-template">

    I tried this, but it didn't work and I didn't see any errors come through.
  2.
  3. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 29 Aug 2011 Link to this post

    Hello Burke,

    I think there is no way to get the content of the JavaScript file and this is why you can't include the template file like this.

    A possible workaround is to use $.get to load the template file:

    $(document).ready(function() {
       $.get("template.html", function(value) {
           var template = kendo.template(value);
     
           $("p").text(template( { firstName: "John", lastName: "Doe" } ))
       });
    });

    I am sending a sample implementation.

    Regards,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Steve
    Steve avatar
    1885 posts
    Member since:
    Dec 2008

    Posted 21 Nov 2011 Link to this post

    Can I add a feature request for this?  In jQuery templates you could have an external script file to define them

    1) Saves markup being downloaded
    2) Cache-able

    This is their syntax in the script file
    //Used to display the slides for the player
    $.template("playerslides",
              "<ul id='slideList' style='display:none'>\
                {{each CuePoints}}\
                <li class='rrItemInner'>\
                    <img src='${WebDav}${small}?ticket=${Ticket}' alt='Slide ${index}' cue='${time}' slideindex='${slideindex}' />\
                </li>\
                {{/each}}\
            </ul>");
    (the slashes are just me wanting it to be more readable by putting things on new lines)

    Steve
  7. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 24 Nov 2011 Link to this post

    Hello Steve,

     You can define templates in external JavaScript files, and assign them to variables. Later, you can access them - thus achieving the same result (if I understood you correctly). 

    Something like this:

    // script.js
    var playerSlidesTemplate = kendo.template("<div>...")
    <!-- file.html -->
    ...
    <script>
    $("#foo").html(playerSlidesTemplate({}));
    </script>
    ...

    If you have troubles with the scope, you can always assign the template to the window -
    window.playerSlidesTemplate = ...

    Regards,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Joshua
    Joshua avatar
    69 posts
    Member since:
    May 2012

    Posted 28 Jul 2012 Link to this post

    I am linking to the example of how to load external templates that I think applies to this question: http://docs.kendoui.com/howto/load-templates-external-files 

    Perhaps people will find it a little easier than I did.

    I do have a question about the example. Does it make sense to use the pubsub method here, instead of the trigger?
    http://www.kendoui.com/blogs/teamblog/posts/12-07-03/building_really_big_applications_with_kendo_ui.aspx 
    http://vimeo.com/16234207 


  11. Spirent
    Spirent avatar
    13 posts
    Member since:
    Apr 2012

    Posted 20 Jan 2015 Link to this post

    If you're using MVC, drop the template into a partial view and include it where you want it.
  13. Joshua
    Joshua avatar
    69 posts
    Member since:
    May 2012

    Posted 20 Jan 2015 Link to this post

    loading remote templates was going to slow and it was a pain to manage multiples, so We just user server side includes now.

    <!--#include file="../Templates/_supplierSearchTemplate.htm"-->

    Still not sure how to do it with pure HTML...
  14.
Back to Top