json - Kendo UI 在 ListView 的模板中循环遍历 Json 中的集合

Question

我试图在一个 ListView 的 Kendo UI 模板中找出如何循环遍历每个对象内的集合以在页面上呈现信息。这是我正在使用的 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 UI 识别它。

提前致谢!

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