在模板中訪問和迭代Kendo UI Listview的數組屬性

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

您不需要列表視圖的數據源。 從該數據源為模板提供了一個項目，您可以代替使用它。

還有其他一些問題：

1. 如果orders是一個JavaScript數組，則應通過length字段獲取其長度。 這不是一種方法。
2. length拼寫錯誤。
3. 從JavaScript數組獲取項目的正確方法是orders[x]而不是orders.[x] 。
4. 要在Kendo UI模板中輸出值，應使用#: #表達式。
5. 您的列表視圖是通過<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