// 定义模板
var template = '<div class="item"><h2>${name}</h2><p>${description}</p></div>';

// 渲染数据
var data = {name: "产品A", description: "这是产品A的描述"};
var html = $.tmpl(template, data);
$("#container").append(html);

// 定义命名模板
$.template("productTemplate", 
  '<li data-id="${id}">${name} - ${price}</li>'
);

// 渲染数据组
var products = [
  {id: 1, name: "产品A", price: "$10"},
  {id: 2, name: "产品B", price: "$20"}
];

$.tmpl("productTemplate", products).appendTo("#productList");

// 模板函数
function renderProductGroup(products) {
  return products.map(product => `
    <div class="product-group">
      <h3>${product.name}</h3>
      <p>价格: ${product.price}</p>
      ${product.features.map(feat => `
        <span class="feature">${feat}</span>
      `).join('')}
    </div>
  `).join('');
}

// 使用
const productData = [
  {name: "产品A", price: "$10", features: ["轻便", "耐用"]},
  {name: "产品B", price: "$20", features: ["防水", "大容量"]}
];

$("#container").html(renderProductGroup(productData));

// 清除旧模板
$.template("productTemplate", null);
// 重新定义模板
$.template("productTemplate", newTemplate);

// 使用on()进行事件委托
$("#productList").on("click", ".product-item", function() {
  // 处理点击事件
});

// 分批渲染
function renderInChunks(data, chunkSize, container, template) {
  let i = 0;
  function addChunk() {
    const chunk = data.slice(i, i + chunkSize);
    $.tmpl(template, chunk).appendTo(container);
    i += chunkSize;
    if (i < data.length) {
      setTimeout(addChunk, 0); // 让UI有机会更新
    }
  }
  addChunk();
}