jQuery – 透過元素 template 製作模板

2019-04-01 / JSN / 0 Comments / 2,815 次瀏覽

HTML5 有一個元素叫做 <template>，在使用 jQuery 取得內容並複製成為模板，除了使用 clone() 之外，記得搭配 outerHTML 使用。以下範例

詳細程式碼如下

<h1>訂單</h1>
<table class="orders" border="1">
  
</table>

<template class="item">
  <tr>
    <th class="id"></th>
    <td class="title"></td>
  </tr>
</template>
// 取得模板，透過取得 HTML 以後複製一份
var getTemplate = function (){
  var html = $("template.item").html();
  return $(html).clone();
}

// 假設這是 AJAX 取得的資料
var ajaxData = function (){
  return [{
    id: 1,
    title: '蔬菜'
  }, {
    id: 2,
    title: '水果'
  }]
}

$(function (){
  // 開始
  var data = ajaxData()
  var temp = getTemplate()
  
  // 準備一個用來組合的 html 編碼的變數
  var mix = '';
  
  // 批次組合
  $.each(data, function (key, ele){
    temp.find(".id").text(ele.id)
    temp.find(".title").text(ele.title)
    
    // 必須要使用 outerHTML 才能取得根節點 <tr>
    mix += temp[0].outerHTML
  })
  
  // 迴圈結合後再一次寫入 html 可以減少效能負擔
  $("table.orders").html(mix)
    
})

發表迴響