2012-09-03 73 views
10

我想弄清楚Kendo UI模板中的列表視圖如何通過每個對象內的集合循環來呈現頁面上的信息。這裏是我用打JSON的例子:Kendo UI循環通過Json中的ListView模板內的集合

{"Data":[{"Title":"Malicious Acts","KeyPairs":{"Key1":"12","Key2":"24"}},   {"Title":"Enrollments","KeyPairs":{"Key1":"12","Key2":"24"}},{"Title":"Customer Feedback","KeyPairs":{"Key1":"12","Key2":"24"}},{"Title":"Questionable Accounts","KeyPairs":{"Key1":"12","Key2":"24"}}],"Total":4,"AggregateResults":null,"Errors":null} 

我要呈現在模板中的密鑰對項目,只是遇到了一些麻煩了解如何。

這裏是源:

<div id="subscriberFunctions"> 

    <script type="text/x-kendo-tmpl" id="template"> 
     <div class="subscriberFunction"> 
      <h3>${Title}</h3> 
      <!-- Display KeyPairs --> 
     </div> 
    </script> 

    @(Html.Kendo().ListView<SubscriberMenuFunction>() 
     .Name("listView") 
     .TagName("div") 
     .ClientTemplateId("template") 
     .DataSource(dataSource => 
     { 
      dataSource.Read(read => read.Action("SubscriberMenu", "ListView")); 
     }) 
     .Selectable(selectable => selectable.Mode(ListViewSelectionMode.Single)) 

    ) 
</div> 

我敢肯定,我只是這得太多,這是簡單的東西,但不知道如何實現在模板中的foreach循環的劍道UI識別它。

在此先感謝!

回答

23

您可以在for循環與抗衡做到這一點。這應該可以解決您的問題:

<script type="text/x-kendo-tmpl" id="template"> 
<div class="subscriberFunction"> 
    <h3>${Title}</h3> 
    <!-- Display KeyPairs --> 
    <ul> 
     #for (var i=0,len=KeyPairs.length; i<len; i++){# 
      <li>${ KeyPairs[i] }</li> 
     # } # 
    </ul> 
</div> 

+0

這是一個更好的方法,效果很好,不會在輸出中帶來額外的代碼片段。 – mservais

+0

我認爲你在「var i = 0」之後有一個輸入錯誤,逗號應該是半角正確的? –

+0

^我認爲你在'應該是'之後出現錯字,'半決賽'應該是'分號'吧? :P – PAULDAWG

8

你可以任意JavaScript代碼模板內:

<script type="text/x-kendo-tmpl" id="template"> 
    <div class="subscriberFunction"> 
     <h3>${Title}</h3> 
     <!-- Display KeyPairs --> 
     <ul> 
     # for (var key in KeyPairs) { # 
       <li>${ KeyPairs[key] }</li> 
     # } # 
     </ul> 
    </div> 
</script> 
+2

這引起了我的價值觀,而是沿着什麼樣子的JavaScript代碼帶來了:•\t 52b1e4cc-5fef-4f5c-a0b5-f054b2cf6655 •\t功能(){返回b} (a){var b = this,c,d,e = function(){return b},f; o.fn.init.call(this); for(d in a)c = a [ d],d.charAt(0)= 「_」 &&(F = M.call(c)中,C = b.wrap(C,d,e))的,b [d] = C;!b.uid = n.guid()} •\t函數(a){返回this.hasOwnProperty(a)&& a!==「_ events」&& typeof this [a]!== r && a!==「uid」} •\t function(){var a = {},b,c; for(c in this)if(this.shouldSerialize(c)){b = this [c]; if(b instanceof Q)b = b.toJSON(); a [c] = b} return a} ... – mservais

+0

KeyPair是這個例子的一個壞名字嗎? – mservais

+0

@mservais你弄清楚如何擺脫JavaScript?我面臨同樣的困境。 –