Template binding syntax

3 posts, 1 answers
  1. RES
    RES avatar
    77 posts
    Member since:
    Sep 2010

    Posted 30 Mar 2014 Link to this post

    Can someone explain why this method of style binding works in the following example.

    http://trykendoui.telerik.com/@InternetSavage/UVaL

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


    But doesn't work in this example?

    http://trykendoui.telerik.com/@InternetSavage/ijUw

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


    I have a similar template that I'm working on and can only get the style bindings to work with the former syntax but not the latter.

    <script id="photoThumbnailTemplate" type="text/x-kendo-template">
        <div class="photo-thumbnail" data-bind="events: { mouseover: showEdit, mouseout: hideEdit }" style="width: #: thumbnailWidth #px; height: #: thumbnailHeight #px;">
            <a data-bind="click: showPhoto">
                <img data-bind="attr: { src: thumbnailUrl }" style="width: #: thumbnailWidth #px; height: #: thumbnailHeight #px;" />
            </a>
            <div class="thumbnailOverlay photo-thumbnail-overlay" data-bind="click: showPhoto" style="width: #: thumbnailWidth #px; height: #: thumbnailHeight #px;"></div>
        </div>
    </script>
  2. Answer
    Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 01 Apr 2014 Link to this post

    Hello,

    the data-bind syntax does not work because the CSS size values require units. For example, width: 80 is not a valid rule (px is missing). 

    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
  4. RES
    RES avatar
    77 posts
    Member since:
    Sep 2010

    Posted 01 Apr 2014 in reply to Petyo Link to this post

    Ahh thanks, problem solved.
Back to Top