Пользовательский интерфейс Kendo UI через коллекцию в Json в шаблоне для ListView

Я пытаюсь выяснить внутри шаблона пользовательского интерфейса Kendo для представления списка, как прокручивать коллекцию внутри каждого объекта, чтобы отображать информацию на странице. Вот пример json, с которым я играю:

{"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}

Я хочу отображать элементы KeyPairs в шаблоне и просто иметь некоторые проблемы с пониманием того, как это сделать.

Вот источник:

<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>

Я уверен, что просто переоцениваю это, и это нечто упрощенное, но не уверен, как реализовать цикл foreach в шаблоне для пользовательского интерфейса Kendo, чтобы его распознать.

Спасибо заранее!

Ответ 1

Вы можете сделать это с помощью счетчика в цикле for. Это должно исправить вашу проблему:

<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>
</script>

Ответ 2

В шаблоне может быть произвольный код JavaScript:

<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>

Ответ 3

После того, как вы знаете синтаксис, можно пройтись по коллекции. Это в основном ответ Стенса с более ясным синтаксисом. Если вы используете список, вы можете получить доступ к свойствам, просто добавив их, например, <li>#=KeyPairs[i].FooBar#</li>

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