javascript - 在模板中访问和迭代 Kendo UI Listview 的数组属性

Question

我有一个 Kendo UI 移动 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

您不需要 ListView 的数据源。该模板从该数据源中获得了一个项目，您可以改为使用该项目。

还有一些其他问题:

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