Handlebars.js的下载及使用示例

本文提供了一个使用Handlebars.js模板引擎来动态渲染HTML页面的示例,展示了如何通过JavaScript编译模板并填充数据,最终生成包含用户信息的页面。

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

官方下载地址:Handlebars.js



<!DOCTYPE html>
<html>
<head>
    <title>Handlebars Expressions Example</title>
</head>
<body>
<h1>Handlebars Expressions Example!</h1>
<!--this is a list which will rendered by handlebars template.    -->
<div id="list">
</div>

<script type="text/javascript" src="script/jquery-1.3.1.js"></script>
<script type="text/javascript" src="script/handlebars-v1.3.0.js"></script>

<script id="people-template" type="text/x-handlebars-template">
    {{#people}}
    <div class="person">
        <h2>{{first_name}} {{last_name}}</h2>
        <div class="phone">{{phone}}</div>
        <div class="email"><a href="mailto:{{email}}">{{email}}</a></div>
        <div class="since">User since {{member_since}}</div>
    </div>
    {{/people}}
</script>

<script type="text/javascript">
    $(document).ready(function() {

        // compile our template
        var template = Handlebars.compile($("#people-template").html());

        var data = {
            people: [
                { first_name: "Alan", last_name: "Johnson", phone: "1234567890", email: "alan@test.com", member_since: "Mar 25, 2011" },
                { first_name: "Allison", last_name: "House", phone: "0987654321", email: "allison@test.com", member_since: "Jan 13, 2011" },
                { first_name: "Nick", last_name: "Pettit", phone: "9836592272", email: "nick@test.com", member_since: "Apr 9, 2009" },
                { first_name: "Jim", last_name: "Hoskins", phone: "7284927150", email: "jim@test.com", member_since: "May 21, 2010" },
                { first_name: "Ryan", last_name: "Carson", phone: "8263729224", email: "ryan@test.com", member_since: "Nov 1, 2008" }
            ]
        };

        $('#list').html(template(data));
    });
</script>
</body>
</html>



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值