This is a migrated thread and some comments may be shown as answers.

Templates In External File

4 Answers 328 Views
Templates
This is a migrated thread and some comments may be shown as answers.
Jeffrey Edgett
Top achievements
Rank 1
Jeffrey Edgett asked on 12 Dec 2011, 10:58 PM
Is it possible to store templates in an external file?  

I have some templates that I would like to reuse across multiple pages.   It would be extremely advantageous to be able store them in one file and reference them as needed.   Then if I need to change the template I would only need to do it once.

4 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 13 Dec 2011, 09:05 AM
Hello Jeffrey Edgett,

 You can define the templates in external JavaScript file:

// script.js
var template = kendo.template("#= foo#");

If you include the script in your HTML files, you will be able to access the variable, and reuse the template. 

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!
0
Jeffrey Edgett
Top achievements
Rank 1
answered on 13 Dec 2011, 05:02 PM


1.)  I have this in my templates.js file (called first):
var template_navigation_menu = kendo.template("<li>YES</li>");

I have this in my framework.js file (called second):
var navigation_menu = $("#navigation_menu").kendoMenu();
$(document).ready(function () {
    function navigation_menu_render() {
        $("#navigation_menu").html(kendo.render(template_navigation_menu({}), this.view()));
    }
 
    var datasource_navigation_menu = new kendo.data.DataSource(
    {
        transport:
        {
            read: "xml/navigation" + get_culture_path_modifier() + ".xml"
        },
        schema:
        {
            type: "xml",
            data: "/navigation/menu/item",
            model:
            {
                fields:
                {
                    item_id: "item_id/text()",
                    parent_id: "parent_id/text()",
                    text: "text/text()",
                    url: "url/text()",
                    target: "target/text()",
                    title: "title/text()",
                    google_sitemap_priority: "google_sitemap_priority/text()",
                    google_sitemap_frequency: "google_sitemap_frequency/text()",
                    main_inclusion: "main_inclusion/text()",
                    footer_inclusion: "footer_inclusion/text()"
                }
            }
        },
        change: navigation_menu_render
    });
 
    datasource_navigation_menu.filter({ field: "main_inclusion", operator: "eq", value: "true" });
    datasource_navigation_menu.read();
});

I get a JavaScript error of: 

SCRIPT5002: Function expected
kendo.all.min.js, line 11 character 3066

2.) Is there a setting to allow HTML content (without having to escape every quote mark, etc.) in a template specified in a JavaScript file?

0
Petyo
Telerik team
answered on 14 Dec 2011, 10:25 AM
Hi Jeffrey Edgett,

Up to your questions:

1) kendo.render expects a template function reference, not the output of the template - the correct way to call it would be 
$("#navigation_menu").html(kendo.render(template_navigation_menu, this.view()));

2) The only thing that needs to be escaped in a double quote string is the double quote ("). For strings with  a lot of HTML, I would recommend using single quotes, as it will eliminate the need for escaping the double quotes. 

All the best,
Petyo
the Telerik team
0
Jeffrey Edgett
Top achievements
Rank 1
answered on 14 Dec 2011, 08:52 PM
Thanks.  That worked.
Tags
Templates
Asked by
Jeffrey Edgett
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Jeffrey Edgett
Top achievements
Rank 1
Share this question
or