目录
- 一、代码
- 二、页面显示
一、代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>handlebars 前端模板引擎——handlebars</title><style></style><script src="http://code.jquery.com/jquery-1.11.0.min.js"></script><script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
</head><body><div id="container"></div><script type="text/x-handlebars-template" id="template-user">{{#each this}}<p style="color:grey">key值: {{@key}} index值: {{@index}} 姓名：{{name}}</p><p>邮箱：{{email}}</p><hr> {{/each}}</script><script>$(function() {$.ajax({type: 'get',url: 'http://jsonplaceholder.typicode.com/users',dataType: "json",success: function(res) {var newsdata = res;console.log(newsdata);var $container = $('#container');var result = $('#template-user').html();var template = Handlebars.compile(result);var html = template(newsdata)$container.html(html)}})})</script></body></html>
二、页面显示
标签：前端模板引擎，handlebars，HTML渲染
更多演示案例，查看 案例演示
欢迎评论留言!
