Model property cannot be re-use inside a html template for loop.

2 posts, 0 answers
  1. Kee
    Kee avatar
    8 posts
    Member since:
    Sep 2012

    Posted 15 Jul 2013 Link to this post

    Hi,<br>
    <br>
    I run into a problem with the sample code below and I am not sure what causes it.  The problem is that the "temperatureLabel" gets display only once inside the for loop in the "myTemplate" template. <br>
    <br>
    <br>
    var viewModel = kendo.observable({temperatureLabel: "Temperature", mydata:[]});<br>
    <font style="line-height: 1.65;">$.ajax({</font><br>
                        url: url,<br>
                        context: this,<br>
                        type: "GET",<br>
                        success: function(data) {<br>
                            this.viewModel.set("mydata", data);<br>
                            kendo.bind($("#view"), viewModel, kendo.mobile.ui); <br>
                        },<br>
                        error: function(xhr, statusText, errorThrown) {<br>
                           console.log(errorThrown);<br>
                        },<br>
                        timeout: 10000<br>
     });<br>
    <br>
    <div id="view"><br>
    <ul id="taf-panelbar" data-bind="source: mydata" data-template="myTemplate"></ul><br>
    </div><br>
    <br>
    <script id="myTemplate" type="text/x-kendo-template"><br>
              # for (var i = 0; i < forecast.length; i++) { #<br>
                    <li><br>
                   <div><br>
                   <table style="border: 1px solid lightGray; border-radius:6px;"><br>
                        <tr><br>
                            <td class="label"><span data-bind="text:temperatureLabel></span></td><br>
                            <td>:</td><br>
                            <td style="text-align:left;"><span>#=forecast[i].temperature#</span></td><br>
                        </tr> <br>
                   </table><br>
                   </div><br>
                   </li><br>
              # }#<br>
    </script><br>
    <br>
    Can someone shed some lights on this?<br>
    <br>
    Thanks,<br>
    Kee
  2. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 16 Jul 2013 Link to this post

    Hi Kee,

    A template used in MVVM bound element or widget needs a single root DOM element. Instead of looping manually through the forecast entries, you can bind the list to the forecast array. Please check this example.

    Regards,
    Petyo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top