天天看点

Handlebars.js 模板库

Handlebars 介绍

Handlebars 是 JavaScript 一个语义模板库,通过对view和data的分离来快速构建Web模板。

http://handlebarsjs.com/installation.html (官方文档)

http://keenwon.com/992.html (使用手册)

//例子
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div id="warp"><!-- 编译后的内容 --></div>
    <script src="./handlebars-v4.0.12.js"></script>
    <!--引入handlebars模板:type="text/x-handlebars-template"-->
    <script id="entry-template" type="text/x-handlebars-template">
        <div class="entry">
            <h1>{{title}}</h1>
            <div class="body">{{body}}</div>
        </div>
    </script>
    <script>
        //第一步 获取模板
        var entry = document.querySelector('#entry-template').innerHTML;
        //第二步 编译模板
        var template = Handlebars.compile(entry);
        //第三步 传入数据上下文(context)
        var context = {title: "My New Post", body: "This is my first post!"};
        var html = template(context);
        //第四步 渲染
        var warp = document.querySelector('#warp').innerHTML = html;
    </script>
</body>
</html>