Templates In External File

5 posts, 0 answers
  1. Jeffrey Edgett
    Jeffrey Edgett avatar
    22 posts
    Member since:
    Jun 2005

    Posted 12 Dec 2011 Link to this post

    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.
  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 13 Dec 2011 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Jeffrey Edgett
    Jeffrey Edgett avatar
    22 posts
    Member since:
    Jun 2005

    Posted 13 Dec 2011 Link to this post



    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?

  5. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 14 Dec 2011 Link to this post

    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
  6. Jeffrey Edgett
    Jeffrey Edgett avatar
    22 posts
    Member since:
    Jun 2005

    Posted 14 Dec 2011 Link to this post

    Thanks.  That worked.
Back to Top
Kendo UI is VS 2017 Ready