Kendo UI Schleife durch Sammlung in JSON innerhalb der Vorlage für ListView

Question

Ich versuche herauszufinden, innerhalb einer Kendo UI-Vorlage für eine Listenansicht, wie eine Sammlung innerhalb jedes Objekts durchlaufen werden, um die Informationen auf der Seite zu rendern. Hier ist ein Beispiel für die json, mit denen ich spiele:

{"Data":[{"Title":"Malicious Acts","KeyPairs":{"Key1":"12","Key2":"24"}},   {"Title":"Enrollments","KeyPairs":{"Key1":"12","Key2":"24"}},{"Title":"Customer Feedback","KeyPairs":{"Key1":"12","Key2":"24"}},{"Title":"Questionable Accounts","KeyPairs":{"Key1":"12","Key2":"24"}}],"Total":4,"AggregateResults":null,"Errors":null} 

Ich mag die Keypairs Elemente in der Vorlage machen und nur ein paar Probleme, die das Verständnis, wie zu. Hier

ist die Quelle:

<div id="subscriberFunctions"> 

    <script type="text/x-kendo-tmpl" id="template"> 
     <div class="subscriberFunction"> 
      <h3>${Title}</h3> 
      <!-- Display KeyPairs --> 
     </div> 
    </script> 

    @(Html.Kendo().ListView<SubscriberMenuFunction>() 
     .Name("listView") 
     .TagName("div") 
     .ClientTemplateId("template") 
     .DataSource(dataSource => 
     { 
      dataSource.Read(read => read.Action("SubscriberMenu", "ListView")); 
     }) 
     .Selectable(selectable => selectable.Mode(ListViewSelectionMode.Single)) 

    ) 
</div> 

Ich bin sicher, dass ich dies nur Grübeln, und es ist etwas simpel, aber nicht sicher, wie die foreach-Schleife in der Vorlage implementieren für Kendo UI zu erkennen es.

Vielen Dank im Voraus!

Answer 1

du in der for-Schleife mit einem Zähler tun. Dies sollte Ihr Problem beheben:

<script type="text/x-kendo-tmpl" id="template"> 
<div class="subscriberFunction"> 
    <h3>${Title}</h3> 
    <!-- Display KeyPairs --> 
    <ul> 
     #for (var i=0,len=KeyPairs.length; i<len; i++){# 
      <li>${ KeyPairs[i] }</li> 
     # } # 
    </ul> 
</div> 

Answer 2

können Sie beliebigen JavaScript-Code innerhalb einer Vorlage:

<script type="text/x-kendo-tmpl" id="template"> 
    <div class="subscriberFunction"> 
     <h3>${Title}</h3> 
     <!-- Display KeyPairs --> 
     <ul> 
     # for (var key in KeyPairs) { # 
       <li>${ KeyPairs[key] }</li> 
     # } # 
     </ul> 
    </div> 
</script>