External Template Files

[Burke]

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.

[Atanas Korchev]

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

[sitefinitysteve]

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

[Petyo]

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

[Joshua]

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 

[Spirent]

If you're using MVC, drop the template into a partial view and include it where you want it.

[Joshua]

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...