Hash Templates Rendered as Literals

2 posts, 1 answers
  1. Shane
    Shane avatar
    1 posts
    Member since:
    Jul 2013

    Posted 26 Mar 2015 Link to this post

    Browser is chrome 41.0.2272.101 m
    OS is Windows 7
    jquery is 2.1.3
    kendo UI is v2015.1.318


    When I load the following content (in two files, in the page and in a js file), the following is the result:

    # var myCustomVariable = "foo"; #
    #= myCustomVariable #
    Bob
    Jim
    Anton


    This is a much simplified version of what I was trying to do, but demonstrates the issue (the original problem I was running into was getting this literal hash template output while trying to call render a function that had kendo.Template.compile($('#myTemplate').html())(data);... but this is a simpler version of the same problem).

    From what I can tell from documentation (from which the hash template is lifted) it should work. As well, it seems like the template is running and connected properly (since the remainder output all seems to be executing as expected). I couldn't find any forum or other posts on this topic and no errors are being thrown... It just seems to be completely ignoring the hash template directives and rendering as literals (although I have other scenarios where hash templates do work, but this scenario seems like it should too).

    Is there something I'm missing here? This seems pretty straightforward but...


    PAGE CONTENT:

    <div id="application"></div>

        <script type="text/x-kendo-template" id="layout-template">
            <div id = "wrapper" > 
                <div id="main-section">
                    <section id="content"></section >
                </div>
            </div>
        </script>

        <script type="text/x-kendo-template" id="index-template">
            # var myCustomVariable = "foo"; #
            <p>
                #= myCustomVariable #
            </p>
            <ul data-role = "listview" data-bind = "source: items.customers" data-template = "item" id = "main"> 
            </ul>
        </script>

        <script type="text/x-kendo-template" id="item">
            <li> 
                <span data-bind = "text: customerName"> </span>
            </li>
        </script>




    SCRIPT FILE:
     
    var custList = kendo.observable({
        customers: [{
            customerName: "Bob",
            notes: "Wants his order by Saturday"
        }, {
            customerName: "Jim",
            notes: "Owes us $300"
        }, {
            customerName: "Anton",
            notes: "2 items outstanding on last order"
        }]
    });

    var layoutModel = kendo.observable({

    });

    var indexModel = kendo.observable({
        items: custList
    });

    var layout = new kendo.Layout("layout-template", {
        model: layoutModel
    });

    var index = new kendo.View("index-template", {
        model: indexModel
    });

    var poc = new kendo.Router({
        init: function () {
            console.log("router init")
            layout.render("#application");
        }
    });

    poc.route("/", function () {
        console.log("router root route")
        layout.showIn("#content", index);
    });

    $(function () {
        poc.start();
    });
    p



  2. Answer
    Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 30 Mar 2015 Link to this post

    Hello Shane,

    you should turn the evalTemplate flag for your views/layouts.

    Regards,
    Petyo
    Telerik
     
    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
Back to Top