1

我有一个 Kendo UI 移动列表视图

 <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>
    #}#

是否可以访问模板内列表视图的数据源？有任何想法吗？

4

1 回答 1

2

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

还有一些其他问题：

  1. 如果orders是 JavaScript 数组，您应该通过该length字段获取其长度。它不是一种方法。
  2. length拼写错误。
  3. 从 JavaScript 数组中获取项目的正确方法orders[x]不是orders.[x].
  4. 要在 Kendo UI 模板中输出值，您应该使用#: #表达式。
  5. 您的列表视图是从 a 创建的，<ul>但模板是<div>. 您不能将 a 嵌套<div>在<ul>. 你应该使用 a<li>代替。
  6. <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

于 2013-09-03T07:19:03.700 回答