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

Posted 2023-05-07

【中文标题】Kendo UI 循环遍历 ListView 模板中 Json 中的集合

【英文标题】：Kendo UI loop through collection in Json within template for ListView

【发布时间】：2012-08-28 11:39:49

【问题描述】：

我试图在列表视图的 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

我要呈现在模板中的密钥对项目，只是遇到了一些麻烦的了解如何。 P>

这里是来源：

<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 识别它。

提前致谢！

【参考方案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>

【讨论】：

这是一种更好的方法，效果很好，并且不会在输出中带来额外的代码 sn-p。

我认为你在 "var i=0," 后面有错字，逗号应该是分号吧？

^ 我认为你在“应该是一个”之后有一个错字，“分号”应该是“分号”对吧？ :P

我不知道为什么会有这么多赞成票。它打算在设置中声明 2 个变量，但不起作用，而且可读性不强

本来打算在设置中声明2个变量，所以逗号是正确的，但是这里的聊天显示它不是很可读

【参考方案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>

【讨论】：

这得到了我的价值观，但带来了看起来像 javascript 代码的东西： • 52b1e4cc-5fef-4f5c-a0b5-f054b2cf6655 • function ()return b • function (a)var b=this, c,d,e=function()return b,f;o.fn.init.call(this);for(d in a)c=a[d],d.charAt(0)!="_ "&&(f=M.call(c),c=b.wrap(c,d,e)),b[d]=c;b.uid=n.guid() • 函数 (a)return this.hasOwnProperty(a)&&a!=="_events"&&typeof this[a]!==r&&a!=="uid" • function ()var a=,b,c;for(c in this) if(this.shouldSerialize(c))b=this[c];if(b instanceof R||b instanceof Q)b=b.toJSON();a[c]=breturn a ...

KeyPairs 对这个例子来说是个坏名字吗？

@mservais 你知道如何摆脱 javascript 吗？我也面临同样的困境。

对于像@mservais 这样有问题的人：尝试在 KeyPairs.toJSON() 中循环。

【参考方案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>

【参考方案4】：

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

<script type="text/x-kendo-tmpl" id="template">
    <div class="subscriberFunction">
        <h3>$Title</h3>
          # var t=KeyPairs.join('<br>'); # 
          #=t #
    </div>
</script>