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 #

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


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

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

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

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

    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")

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

    $(function () {

  2. Answer
    Petyo avatar
    2436 posts

    Posted 30 Mar 2015 Link to this post

    Hello Shane,

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

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top