Handlebars初级

最新推荐文章于 2025-08-14 13:49:13 发布

weixin_33966095

最新推荐文章于 2025-08-14 13:49:13 发布

阅读量68

点赞数

CC 4.0 BY-SA版权

文章标签： python json

原文链接：https://my.oschina.net/uniquejava/blog/490989

2019独角兽企业重金招聘Python工程师标准>>>

阅读官网首页上的小例子：handlebarjs.com
一个小例子：
1. 在head中引入handlerbar.js

2. 在script标签内定义模板

3. 使用Handlebars.compile(HERE_IS_YOUR_TEMPLATE_STRING)编译得到一个JS函数，假定这个函数名为template.

4. 调用这个编译后的函数，传入JSON对象做为参数：template(YOUR_JSON_OBJECT_HERE).

这个过程很自然简单，很好理解。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="handlebars-v3.0.3.js"></script>
    <script src="jquery-2.1.4.js"></script>
    <script id="entry-template" type="text/x-handlebars-template">
      <div class="entry">
        <h1>{{title}}</h1>
        <div class="body">
          {{body}}
        </div>
      </div>
    </script>
    
</head>
<body>
<script>
        var source   = $("#entry-template").html();
        var template = Handlebars.compile(source);


        var context = {title: "My New Post", body: "This is my first post!<hr>"};
        var html    = template(context);
        $("body").append(html);
    </script>    
</body>
</html>

默认的用两个{{号会自动转义（escape）HTML字符，也是就编码HTML字符，这样你在页面上看到的和你在编辑器中看到的会是一模一样。比如<hr>就是<hr>.

用{{{三个括号则会解释执行其中的HTML标签。

二，接下来看一些其它的用法.

转载于:https://my.oschina.net/uniquejava/blog/490989