template.js 模板之渲染数据

最新推荐文章于 2025-05-19 02:24:27 发布

原创最新推荐文章于 2025-05-19 02:24:27 发布 · 4.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#template #template.js #template渲染数据 #template each #template each 简写

JavaScript 专栏收录该内容

23 篇文章

订阅专栏

本文介绍使用模板引擎在jQuery项目中简化数据渲染的过程，避免大量字符串拼接，提高代码可读性和维护性。通过实例演示如何利用template函数将数据动态填充到HTML结构中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么使用template？

1，在jquery 项目里面，在渲染数据的时候，可避免写大量的字符串拼接，

2，使用简单

本章只介绍如何渲染数据,如下：

var data = {
  "code":"200",
  "data":{
    "currentPage":1,
    "datalist":[
      {
        "extraId":"流浪的地球",
        "id":"8904de706c234acfb36f33a78a358d15"
      },
      {
        "extraId":"流浪的地球",
        "id":"4217de54ffe642ccb123f56988830a2b"
      }
    ]
  },
  "optime":1564985970268
}

假如变量data是从后台请求回来的数据

执行：

$(".tab-cent ul").html(template(temId,data.data));

$(".tab-cent ul") 是你需要渲染的DOM元素

$(".tab-cent ul").html(）里面的template（）

第一个参数是你在页面上定义的templateID，也就是下面代码的<script id="temId" type="text/html">

第二个参数是渲染的数据，data.data 指向到datalist

然后执行 {{each datalist as item index}}。 item是内容，index是key，比如你要取渲染id，那么就是{{item.id}}

记得html里面的语法要 {{ }} 包起来

你的html

<div class="tab-cent">
  <ul>
    <script id="temId" type="text/html">
      {{each datalist as item index}}
      <li>
        <a href="../news/news_detail.html?id={{item.id}}">{{item.name}}</a>
      </li>
      {{/each}}
    </script>
  </ul>
</div>

具体简写我就不详细描述了，大概是这样：

<div class="tab-cent">
  <ul>
    <script id="temId" type="text/html">
      {{each datalist }}
      <li>
        <a href="../news/news_detail.html?id={{$value.id}}">{{$value.name}}</a>
      </li>
      {{/each}}
    </script>
  </ul>
</div>

$value 就是最上面的 item，同理，$index 就是所以 index