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

[Kee]

Hi,

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. 


var viewModel = kendo.observable({temperatureLabel: "Temperature", mydata:[]});
$.ajax({
                    url: url,
                    context: this,
                    type: "GET",
                    success: function(data) {
                        this.viewModel.set("mydata", data);
                        kendo.bind($("#view"), viewModel, kendo.mobile.ui); 
                    },
                    error: function(xhr, statusText, errorThrown) {
                       console.log(errorThrown);
                    },
                    timeout: 10000
 });

<div id="view">
<ul id="taf-panelbar" data-bind="source: mydata" data-template="myTemplate"></ul>
</div>

<script id="myTemplate" type="text/x-kendo-template">
          # for (var i = 0; i < forecast.length; i++) { #
                <li>
               <div>
               <table style="border: 1px solid lightGray; border-radius:6px;">
                    <tr>
                        <td class="label"><span data-bind="text:temperatureLabel></span></td>
                        <td>:</td>
                        <td style="text-align:left;"><span>#=forecast[i].temperature#</span></td>
                    </tr> 
               </table>
               </div>
               </li>
          # }#
</script>

Can someone shed some lights on this?

Thanks,
Kee

[Petyo]

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

[Kee]

Thanks Petyo!  This works great.  I have another question on inner array.  My forecast object below has another inner array of temperature.  So it is something like this.
[ {
  "forecast" : [ {
     "temperature": 25 &deg;,
    "cloudLayer" : [ {
      "myCloudLayer" : {
        "displayStr" : "FEW at 2500 ft "
      }
    }, {
      "myCloudLayer" : {
        "displayStr" : "SCT at 10000 ft "
      }
    }, {
      "myCloudLayer" : {
        "displayStr" : "OVC at 20000 ft "
      }
    } ,
   { 
    "temperature": 25 &deg;,
    "cloudLayer" : [ {
      "myCloudLayer" : {
        "displayStr" : "FEW at 2500 ft "
      }
    }, {
      "myCloudLayer" : {
        "displayStr" : "SCT at 10000 ft "
      }
    }, {
      "myCloudLayer" : {
        "displayStr" : "OVC at 20000 ft "
      }
    } ]
  }]

The question is how do I structure my model so that I do not have to manually loop through my "cloudLayer" nested array.

Thanks for your help
Kee Yang

[Petyo]

Hi Kee,

You can employ the same approach and nest a data-bind="source: cloudLayer" binding in the inner template, too.

Regards,
Petyo
Telerik

[Kee]

Thanks Petyo,

That works great!

Kee Yang