1

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

テンプレート内のリストビューのデータソースにアクセスできますか? 何か案は？

4

1 に答える 1

2

リスト ビューのデータ ソースは必要ありません。テンプレートには、代わりに使用できるこのデータ ソースからの項目が与えられます。

他にもいくつかの問題があります。

  1. が JavaScript 配列の場合orders、フィールドを介してその長さを取得する必要がありlengthます。メソッドではありません。
  2. のlengthスペルが間違っています。
  3. JavaScript 配列から項目を取得する適切な方法orders[x]はorders.[x].
  4. Kendo UI テンプレートで値を出力するには、#: #式を使用する必要があります。
  5. リスト ビューは から作成されて<ul>いますが、テンプレートは<div>です。<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 に答える