This is a migrated thread and some comments may be shown as answers.

Template binding syntax

2 Answers 66 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
RES
Top achievements
Rank 1
RES asked on 30 Mar 2014, 05:18 AM
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 Answers, 1 is accepted

Sort by
0
Accepted
Petyo
Telerik team
answered on 01 Apr 2014, 04:05 PM
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!
 
0
RES
Top achievements
Rank 1
answered on 01 Apr 2014, 05:15 PM
Ahh thanks, problem solved.
Tags
MVVM
Asked by
RES
Top achievements
Rank 1
Answers by
Petyo
Telerik team
RES
Top achievements
Rank 1
Share this question
or