24. 模板渲染与 data-* 属性

一、场景说明

这个页面把一个常见应用场景拆成可运行的小案例。你可以先操作演示区，再阅读右侧代码，最后尝试底部练习。

学习重点：不要只复制代码，要观察“数据 → 状态 → 渲染 → 事件”的关系。

二、可运行演示

三、知识点提醒

模板函数让 HTML 结构更容易复用。
`data-id` 适合绑定数据库 ID、产品 ID、动作名称。
事件委托让动态列表不需要重复绑定按钮。

四、练习建议

增加“加入询盘”按钮。
把详情展示改成弹窗。

完整 JS 示例

本页实际运行的代码保存在 assets/js/demos/24-template-dataset.js，下面同步展示，方便学习和复制。

// 页面 24：模板渲染和 data-* 属性
const templateProducts = [
  { id: 'D-01', name: 'Decking Sample', color: 'Teak', usage: 'Outdoor floor' },
  { id: 'W-02', name: 'Wall Panel Sample', color: 'Birch', usage: 'Feature wall' },
  { id: 'F-03', name: 'Fence Sample', color: 'Grey', usage: 'Garden privacy' }
];
const templateList = document.querySelector('#p24-list');
const detail = document.querySelector('#p24-detail');

function productTemplate(product) {
  return `
    <article class="item-card">
      <h4>${product.name}</h4>
      <p>颜色：${product.color}</p>
      <button data-id="${product.id}">查看详情</button>
    </article>
  `;
}

function renderList() {
  templateList.innerHTML = templateProducts.map(productTemplate).join('');
}

function showProductDetail(id) {
  const product = templateProducts.find((item) => item.id === id);
  if (!product) return;
  detail.textContent = `编号：${product.id}\n名称：${product.name}\n颜色：${product.color}\n用途：${product.usage}`;
}

templateList.addEventListener('click', (event) => {
  const button = event.target.closest('button[data-id]');
  if (!button) return;
  showProductDetail(button.dataset.id);
});

renderList();