Hash Templates Rendered as Literals

[Shane]

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

[Petyo]

Hello Shane,

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

Regards,
Petyo
Telerik