What does the "#=" and "#:" mean/do?

[Rod]

I've reviewing the code Binding to remote data example for the ListView control. There's some HTML which I don't understand. It might be some HTML5 code snippets I'm unaware of, or it might be something specific to Kendo UI for jQuery. In any case I'm sorry for my ignorance. 

Here's a compact example from I'm referring to:

    <script type="text/x-kendo-template" id="template">
        <div class="product">
            <img src="../content/web/foods/#= ProductID #.jpg" alt="#: ProductName # image" />
            <h3>#:ProductName#</h3>
            <p>#:kendo.toString(UnitPrice, "c")#</p>
        </div>
    </script>

In the code snippet the src attribute has "../content/web/foods/#= ProductID #.jpg" and the alt attribute has "#: ProductName # image". I get that there's a substitution going on, but I don't understand why the src attribute using #= and the alt attribute doesn't. Why does it use #: ? 

What's the difference between the two and when do you use one other the other?

[Georgi]

Hello Rod, 

Thank you for the provided code snippet and for the link to the exact demo you are referencing.

This specific example above uses Kendo Templates to automatically merge JavaScript data to HTML and render the products in the ListView exactly in the way you see them.

As for the #: and #= literals, they are a part of the syntax, called hash syntax, which is used in the Kendo Templates. #= # is used when the user wants to render values as HTML, while #: # is used when the user wants to use HTML encoding to display values. You can reference this link for additional information. 

I hope that this explanation will help you gain a better understanding of Kendo Templates.

Let me know if you have any additional questions.

Best regards,

Georgi

Progress Telerik

[Rod]

Thank you, Georgi, this answers my question.