Question

我有一个Kendo UI Mobile Listview

 <ul data-role="listview" data-bind="source: customers" data-template="customer-template"/>

现在我想访问customer的属性，它是一个数组并在模板中迭代它。像这样的东西

<script type="text/x-kendo-template" id="customer-template">
    <div>#:CustomerName#</div>
    <div>
         <div>Orders</div>
            #for(x=0;x<customers.orders.lentgh(); x++){#
                <div>customers.orders.[x].OrderId</div>
            #}#

 </div>

显然，这行会引发错误

 #for(x=0;x<customers.orders.lentgh(); x++){#
       <div>customers.orders.[x].OrderId</div>
    #}#

是否可以访问模板中listview的数据源？任何想法？

Answer 1

您不需要列表视图的数据源。该模板将从此数据源中获得一个项目，您可以使用该项目。

还有一些其他问题：

如果orders是JavaScript数组，则应通过length字段获取其长度。这不是一种方法。
length拼写错误。
要从JavaScript数组获取项目的正确方法是orders[x]而不是orders.[x]。
要在Kendo UI模板中输出值，您应该使用#: #表达式。
您的列表视图是从<ul>创建的，但模板是<div>。您无法在<div>内嵌套<ul>。您应该使用<li>代替。
<ul>元素不能自动关闭。您需要完全关闭它 - <ul></ul>。

我已在下面的代码段中解决了所有这些问题：

<ul data-role="listview" data-bind="source: customers" data-template="customer-template"></ul>
<script type="text/x-kendo-template" id="customer-template">
  <li>
     <div>#:CustomerName#</div>
     <div>Orders</div>
     #for(var x=0; x < orders.length; x++){#
            <div># orders[x].OrderId #</div>
     #}#
  </li>
</script>

此处还有一个现场演示：http://jsbin.com/aHExUWu/1/edit

访问并迭代模板中的Kendo UI Listview的数组属性

1 个答案: