jQuery-tmpl是一個非常方便的工具,可以根據數據模板快速呈現內容。除了快速處理數據外,jQuery-tmpl也可以和事件處理程序一起使用,可以使應用程序更加交互和易于使用。下面我們來看一下如何使用jQuery-tmpl綁定事件。
// HTML結構 <div id="container"> <ul></ul> <button id="add-btn">增加</button> </div> // 模板結構 <script type="text/x-jquery-tmpl" id="item-tmpl"> <li> <span class="name">${name}</span> <span class="count">${count}</span> <button class="delete-btn">刪除</button> </li> </script> // JS代碼 $(document).ready(function() { // 創建模板 var itemTmpl = $("#item-tmpl").tmpl(); // 增加數據 var data = [ {"name": "蘋果", "count": 10}, {"name": "橙子", "count": 5}, {"name": "葡萄", "count": 3} ]; itemTmpl.tmpl(data).appendTo("#container ul"); // 點擊增加按鈕 $("#add-btn").click(function() { var newItem = {"name": "香蕉", "count": 2}; itemTmpl.tmpl(newItem).appendTo("#container ul"); }); // 點擊刪除按鈕 $("#container ul").on("click", ".delete-btn", function() { $(this).parent().remove(); }); });
上面的代碼中,我們創建了一個數據模板,并將數據添加到頁面上。接下來,我們為增加按鈕綁定了一個點擊事件,當按鈕被點擊時,向數據模板中添加一項數據。最后,我們為每一行數據中的“刪除”按鈕綁定了一個點擊事件,當按鈕被點擊時,刪除該行數據。