2011-06-22 52 views
2

好吧,這有點像json對象和jQuery模板的初始...我想知道如何更深入。問題在於,我懶,想代碼做的工作對我來說....如何調用/運行一個jQuery嵌套模板遞歸

問:>你怎麼遞歸調用一個jQuery模板。

藉此JSON對象:

var Links = 
[{"Name":"Home","NiceUrl":"/home/","Children":null}, 
{"Name":"MX-8","NiceUrl":"/mx-8/","Children":null}, 
{"Name":"Quiz","NiceUrl":"/quiz/","Children": 
     [{"Name":"Thank you","NiceUrl":"/quiz/thank-you/","Children": 
     [{"Name":"Can't get here","NiceUrl":"/URL/","Children":null}] 
    }] 
}]; 

我可以很容易地以 「測驗」 和其子 「三江源」 使用以下模板:

<script id="itemTemplate" type="text/x-jquery-tmpl"> 
    <li><a href="${NiceUrl}">${Name}</a> 
     {{tmpl($data) "#childTemplate"}} 
    </li> 
</script> 
<script id="childTemplate" type="text/html"> 
    <ul>{{each Children}}<li><a href="${NiceUrl}">${Name}</a></li>{{/each}}</ul> 
</script> 

也採用的是HTML並致電取代它:

<script type="text/javascript"> 
    $("#itemTemplate").tmpl(Links).appendTo("#SiteMapHolder"); 
</script> 
<ul id="SiteMapHolder"> 
    <%--jQuery Template will replace this empty space--%> 
</ul> 

我曾嘗試將第二個模板的類型設置爲「text/x-jquery-tmpl」並調用第三個模板,但傳遞的數據似乎與調用它的父項相同。

因此,所有存在更高的智慧和經驗,然後我,告訴我的方式是懶惰和遞歸調用jQuery模板? PS:對不起,這是不是在jsFiddle。它不喜歡我的腳本標籤。 :(

+0

做任何MOD知道如何使這個色彩繽紛所以它更容易閱讀「盜夢空間」已經出臺 – Kieran

+1

路才?巢的概念我的一位同事/朋友決定嘗試使用各種不同的藥物進行編程(這是70年代的)。他做了酸,在生效後從未做過太多的編程。他說他看了一些函數的遞歸定義,並開始大笑。然後他嘲笑他笑的事實。 ... –

+0

@mike我在笑我自己笑在這。惡性循環何時結束! – Kieran

回答

3

我想你只需要檢查Children是否存在,並用Children作爲數據對同一個項目模板進行遞歸調用,你還可以有條件地添加ul標籤,看看這個jsfiddle是什麼意思: http://jsfiddle.net/bernardchen1/SK2c6/

,我用看起來像這樣的模板本身:

<script id="itemTemplate" type="text/x-jquery-tmpl"> 
<li><a href="${NiceUrl}">${Name}</a> 
    {{if Children}} 
    <ul> 
    {{tmpl(Children) "#itemTemplate"}} 
    </ul> 
    {{/if}} 
</li> 

+0

你有沒有任何代碼示例可以讓我開始正確的方向? – Kieran

+1

在編輯我的答案時,您可能已添加您的評論。我沒有包含一個我相信做你想做的jsfiddle,並且我還包含了我認爲你需要的模板。 –

+0

非常感謝堆。它現在非常簡單,我可以看到它。它可以調用自己。我只是把它弄得一團糟。再次感謝。 – Kieran