Kendo UI 在 ListView 的模板中循环遍历 Json 中的集合
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12252859/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Kendo UI loop through collection in Json within template for ListView
提问by mservais
I am trying to figure out within a Kendo UI template for a list view how to loop through a collection within each object to render the information on the page. Here is an example of the json I am playing with:
我试图在一个列表视图的 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}
I want to render the KeyPairs items in the template and just an having some trouble understanding how to.
我想在模板中呈现 KeyPairs 项目，但在理解如何操作时遇到了一些麻烦。
Here is the source:
这是来源：
<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>
I'm sure I'm just overthinking this, and it is something simplistic, but not sure how to implement the foreach loop in the template for Kendo UI to recognize it.
我确定我只是想多了，这很简单，但不确定如何在模板中实现 foreach 循环，以便 Kendo UI 识别它。
Thanks in advance!
提前致谢！
回答by Stan
You can do this with a counter in the for-loop. This should fix your issue:
您可以使用 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>
回答by Atanas Korchev
You can have arbitrary JavaScript code inside a template:
您可以在模板中包含任意 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>
回答by Red
It is possible to loop through the collection once you know the syntax. This is basically Stans answer with clearer syntax.
If you're using a List you can access properties just by adding them, e.g., <li>#=KeyPairs[i].FooBar#</li>
一旦知道语法，就可以遍历集合。这基本上是斯坦斯的答案，语法更清晰。如果您使用的是列表，则只需添加属性即可访问属性，例如，<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>
回答by U.Y.
Here is another elegant way of looping though collection within client template
这是在客户端模板中循环使用集合的另一种优雅方式
<script type="text/x-kendo-tmpl" id="template">
<div class="subscriberFunction">
<h3>${Title}</h3>
# var t=KeyPairs.join('<br>'); #
#=t #
</div>
</script>
