Template binding syntax

[RES]

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>

[Petyo]

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

 

 

[RES]

Ahh thanks, problem solved.