在網頁開發中,經常需要對數據進行遍歷和輸出,而jquery.tmpl就是一個方便的插件,可以幫我們實現這個功能。
var data = {
list: [
{name:'Tom', age:18},
{name:'Jerry', age:20},
{name:'Kate', age:22}
]
};
$.tmpl("{{each list}}- ${name}--${age}
{{/each}}
", data).appendTo('#list');
上述代碼中,我們定義了一個包含列表的數據,通過jquery.tmpl插件,我們可以通過模板語法來輸出這個列表。
其中,以${}包圍的是需要輸出的內容,each是jquery.tmpl提供的指令,用來遍歷數組或對象。
// 嵌套each
var data = {
students: [
{name:'Tom', age:18, courses:['math', 'english', 'history']},
{name:'Jerry', age:20, courses:['physics', 'biology']},
{name:'Kate', age:22, courses:['chemistry', 'music']}
]
};
$.tmpl("{{each students}}- ${name}--${age}
{{each courses}}- ${$value}
{{/each}}
{{/each}}
", data).appendTo('#list');
以上代碼中,我們進一步嵌套了一個each遍歷,展示了一個學生與他所選的課程列表。
jquery.tmpl插件為我們提供了很多便利和靈活性,可以在不同場景下輕松輸出我們所需要的數據。
上一篇vue的卡點樂