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

0 Answers 63 Views
ListView
Rod
Top achievements
Rank 1
Rod asked on 19 Aug 2022, 04:54 PM

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
Telerik team
commented on 23 Aug 2022, 07:45 AM

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
Top achievements
Rank 1
commented on 23 Aug 2022, 01:30 PM

Thank you, Georgi, this answers my question.

No answers yet. Maybe you can help?

Tags
ListView
Asked by
Rod
Top achievements
Rank 1
Share this question
or