Question

我试图在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>

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

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

Answer 4

这是在客户端模板中循环浏览集合的另一种优雅方式

cell.customWishlistTapCallback = {

            let heroID = "wishlistImageIDX\(indexPath)"
            cell.theView.heroID = heroID

            let addButtonHeroID = "addWishButtonID"
            self.addButton.heroID = addButtonHeroID

            // track selected index
            self.currentWishListIDX = indexPath.item

            let vc = self.storyboard?.instantiateViewController(withIdentifier: "WishlistVC") as? WishlistViewController

            vc?.wishList = self.dataSourceArray[self.currentWishListIDX]
            // pass drop down options
            vc?.theDropDownOptions = self.dropDownButton.dropView.dropDownOptions
            vc?.theDropDownImageOptions = self.dropDownButton.dropView.dropDownListImages
            // pass current wishlist index
            vc?.currentWishListIDX = self.currentWishListIDX
            // pass the data array
            vc?.dataSourceArray = self.dataSourceArray
            // set Hero ID for transition
            vc?.wishlistImage.heroID = heroID
            vc?.addWishButton.heroID = addButtonHeroID
            // allow MainVC to recieve updated datasource array
            vc?.dismissWishDelegate = self

            vc?.theTableView.tableView.reloadData()
            self.present(vc!, animated: true, completion: nil)

        }

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

4 个答案: