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

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

    Posted 15 Jul 2013 Link to this post

    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
  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!
  3. Kee
    Kee avatar
    8 posts
    Member since:
    Sep 2012

    Posted 18 Jul 2013 Link to this post

    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
  4. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 22 Jul 2013 Link to this post

    Hi Kee,

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

    Regards,
    Petyo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Kee
    Kee avatar
    8 posts
    Member since:
    Sep 2012

    Posted 22 Jul 2013 Link to this post

    Thanks Petyo,

    That works great!

    Kee Yang
Back to Top