Conditional rendering syntax

2 posts, 0 answers
  1. Josh
    Josh avatar
    72 posts
    Member since:
    Jun 2013

    Posted 17 Jan 2014 Link to this post

    Hi,

    I'm looking to conditionally render HTML-encoded values or literal values depending on a javascript property, such as the following:

    <script id="template-cell" type="text/x-kendo-tmpl">
    <td><div class="key-content"># if (data.encode === true) { # #= data.key # # } else { # #: data.key # # }#</div></td>
    </script>

    But all the hash marks reduce readability and are error-prone. What is a better way to handle this?

    Thank you.
  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 20 Jan 2014 Link to this post

    Hello Joshua,

    If I understand you correctly, a regular indentation of the template would work, too:

    <script id="template-cell" type="text/x-kendo-tmpl">
    <td>
        <div class="key-content">
            # if (data.encode === true) { #
                #= data.key #
            # } else { #
                #: data.key #
            # } #
        </div>
    </td>
    </script>

    Alternatively, you can extract this logic to a helper function.

    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