HTML5应用开发：JavaScript语义模板库handlebars教程

最新推荐文章于 2021-12-13 14:35:35 发布
最新推荐文章于 2021-12-13 14:35:35 发布
阅读量945 收藏
点赞数

Web应用开发正在处于一个快速发展的时期，随着HTML5规范的落实和普及，相信会有越来越多的优秀的web应用呈现出来。JavaScript是web应用开发中是非常重要的语言，该语言有很多流行的库供大家使用。本期给大家介绍语义模板库Handlebars的使用方法。

本文示例代码已经全部上传GitHub：https://github.com/DaweiCheng/handlebarstutor 也欢迎大家积极贡献更多示例代码。

目录

1. Handlebars介绍

2. 安装和使用

3. 使用expressions

4. 使用helpers

5. partials

1. Handlebars介绍

Handlebars是JavaScript一个语义模板库，通过对view和data的分离来快速构建Web模板。它采用"Logic-less template"（无逻辑模版）的思路，在加载时被预编译，而不是到了客户端执行到代码时再去编译，这样可以保证模板加载和运行的速度。Handlebars兼容Mustache，你可以在Handlebars中导入Mustache模板。

2. 安装和使用

Handlebars的安装非常简单，你只需要从Github下载最新版本，你也可访问下面网址获取最新信息：http://handlebarsjs.com/。 目前handlebars.js已经被许多项目广泛使用了，handlebars是一个纯JS库，因此你可以像使用其他JS脚本一样用script标签来包含handlebars.js：

 

 
 

  
  

   
   

    
    
1<script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script>

 

3. 使用expressions

Handlebars expressions是handlebars模板中最基本的单元，使用方法是加两个花括号{{value}}, handlebars模板会自动匹配相应的数值，对象甚至是函数。

基本expressions使用方法：

在HTML网页中，添加需要使用模板的地方（目前Handlebars仅支持id操作）：

 

 
 

  
  

   
   

    
    
1<div id="list">

   
   

   
   

    
    
2</div>

   
   

  
  

 
 
 
 

  
  

   
   

    
    
01<script id="people-template" type="text/x-handlebars-template">

   
   

   
   

    
    
02  {{#people}}

   
   

   
   

    
    
03    <div class="person">

   
   

   
   

    
    
04      <h2>{{first_name}} {{last_name}}</h2>

   
   

   
   

    
    
05      <div class="phone">{{phone}}</div>

   
   

   
   

    
    
06      <div class="email"><a href="mailto:{{email}}">{{email}}</a></div>

   
   

   
   

    
    
07      <div class="since">User since {{member_since}}</div>

   
   

   
   

    
    
08    </div>

   
   

   
   

    
    
09  {{/people}}

   
   

   
   

    
    
10</script>



在JavaScript文件中添加预编译函数和数据：

 

 
 

  
  

   
   

    
    
01$(document).ready(function() {

   
   

   
   

    
    
02   

   
   

   
   

    
    
03  // compile our template

   
   

   
   

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

   
   

   
   

    
    
05   

   
   

   
   

    
    
06  var data = {

   
   

   
   

    
    
07    people: [

   
   

   
   

    
    
08      { first_name: "Alan", last_name: "Johnson", phone: "1234567890", email: "alan@test.com", member_since: "Mar 25, 2011" },

   
   

   
   

    
    
09      { first_name: "Allison", last_name: "House", phone: "0987654321", email: "allison@test.com", member_since: "Jan 13, 2011" },

   
   

   
   

    
    
10      { first_name: "Nick", last_name: "Pettit", phone: "9836592272", email: "nick@test.com", member_since: "Apr 9, 2009" },

   
   

   
   

    
    
11      { first_name: "Jim", last_name: "Hoskins", phone: "7284927150", email: "jim@test.com", member_since: "May 21, 2010" },

   
   

   
   

    
    
12      { first_name: "Ryan", last_name: "Carson", phone: "8263729224", email: "ryan@test.com", member_since: "Nov 1, 2008" }

   
   

   
   

    
    
13    ]

   
   

   
   

    
    
14  };

   
   

   
   

    
    
15   

   
   

   
   

    
    
16  $('#list').html(template(data));

   
   

   
   

    
    
17});

 

完整的demo代码：

 

 
 

  
  

   
   

    
    
01<!DOCTYPE html>

   
   

   
   

    
    
02<html>

   
   

   
   

    
    
03  <head>

   
   

   
   

    
    
04    <title>Handlebars Expressions Example</title>

   
   

   
   

    
    
05  </head>

   
   

   
   

    
    
06  <body>

   
   

   
   

    
    
07    <h1>Handlebars Expressions Example!</h1>

   
   

   
   

    
    
08<!--this is a list which will rendered by handlebars template.    --> 

   
   

   
   

    
    
09    <div id="list">

   
   

   
   

    
    
10    </div>

   
   

   
   

    
    
11     

   
   

   
   

    
    
12    <script type="text/javascript" src="script/jquery.js"></script>

   
   

   
   

    
    
13    <script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script>

   
   

   
   

    
    
14     

   
   

   
   

    
    
15    <script id="people-template" type="text/x-handlebars-template">

   
   

   
   

    
    
16      {{#people}}

   
   

   
   

    
    
17        <div class="person">

   
   

   
   

    
    
18          <h2>{{first_name}} {{last_name}}</h2>

   
   

   
   

    
    
19          <div class="phone">{{phone}}</div>

   
   

   
   

    
    
20          <div class="email"><a href="mailto:{{email}}">{{email}}</a></div>

   
   

   
   

    
    
21          <div class="since">User since {{member_since}}</div>

   
   

   
   

    
    
22        </div>

   
   

   
   

    
    
23      {{/people}}

   
   

   
   

    
    
24    </script>

   
   

   
   

    
    
25     

   
   

   
   

    
    
26    <script type="text/javascript">

   
   

   
   

    
    
27      $(document).ready(function() {

   
   

   
   

    
    
28         

   
   

   
   

    
    
29        // compile our template

   
   

   
   

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

   
   

   
   

    
    
31         

   
   

   
   

    
    
32        var data = {

   
   

   
   

    
    
33          people: [

   
   

   
   

    
    
34            { first_name: "Alan", last_name: "Johnson", phone: "1234567890", email: "alan@test.com", member_since: "Mar 25, 2011" },

   
   

   
   

    
    
35            { first_name: "Allison", last_name: "House", phone: "0987654321", email: "allison@test.com", member_since: "Jan 13, 2011" },

   
   

   
   

    
    
36            { first_name: "Nick", last_name: "Pettit", phone: "9836592272", email: "nick@test.com", member_since: "Apr 9, 2009" },

   
   

   
   

    
    
37            { first_name: "Jim", last_name: "Hoskins", phone: "7284927150", email: "jim@test.com", member_since: "May 21, 2010" },

   
   

   
   

    
    
38            { first_name: "Ryan", last_name: "Carson", phone: "8263729224", email: "ryan@test.com", member_since: "Nov 1, 2008" }

   
   

   
   

    
    
39          ]

   
   

   
   

    
    
40        };

   
   

   
   

    
    
41         

   
   

   
   

    
    
42        $('#list').html(template(data));

   
   

   
   

    
    
43      });

   
   

   
   

    
    
44    </script>

   
   

   
   

    
    
45  </body>

   
   

   
   

    
    
46</html>

Block expressions使用方法

使用Block expressions可以改变js的上下文来调用／渲染模板。

例如，我们使用helper创建一个HTML list

 

 
 

  
  

   
   

    
    
1<script id="people-template" type="text/x-handlebars-template">

   
   

   
   

    
    
2    {{#list people}}

   
   

   
   

    
    
3        {{first_name}} {{last_name}}  {{phone}} {{email}} {{member_since}}

   
   

   
   

    
    
4    {{/list}}

   
   

   
   

    
    
5</script>

JavaScript文件中数据如下：

         var template = Handlebars.compile($("#people-template").html());
        Handlebars.registerHelper('list', function (items, options) {
            var out = "<div>";
            for (var i = 0, l = items.length; i < l; i++) {
                out = out + "<div>" + options.fn(items[i]) + "</div>";
            }
            return out + "</div>";
        });

添加一个名叫list的helper，funcitons(items, options)传入两个参数, data中的people作为第一个参数传入，options作为第二个参数传入，options附带属性fn，使用fn可以调用该模块的内容。

 

完整的demo代码：

 

 
 

  
  

   
   

    
    
01<!DOCTYPE html>

   
   

   
   

    
    
02<html>

   
   

   
   

    
    
03  <head>

   
   

   
   

    
    
04    <title>Handlebars Block Expressions Example</title>

   
   

   
   

    
    
05  </head>

   
   

   
   

    
    
06  <body>

   
   

   
   

    
    
07    <h1>Handlebars Expressions Example!</h1>

   
   

   
   

    
    
08<!--this is a list which will rendered by handlebars template.    --> 

   
   

   
   

    
    
09    <div id="list">

   
   

   
   

    
    
10    </div>

   
   

   
   

    
    
11     

   
   

   
   

    
    
12    <script type="text/javascript" src="script/jquery.js"></script>

   
   

   
   

    
    
13    <script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script>

   
   

   
   

    
    
14     

   
   

   
   

    
    
15    <script id="people-template" type="text/x-handlebars-template">

   
   

   
   

    
    
16        {{#list people}}

   
   

   
   

    
    
17            {{first_name}} {{last_name}}  {{phone}} {{email}} {{member_since}}

   
   

   
   

    
    
18        {{/list}}

   
   

   
   

    
    
19    </script>

   
   

   
   

    
    
20     

   
   

   
   

    
    
21    <script type="text/javascript">

   
   

   
   

    
    
22      $(document).ready(function() {

   
   

   
   

    
    
23         

   
   

   
   

    
    
24        // compile our template

   
   

   
   

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

   
   

   
   

    
    
26 

   
   

   
   

    
    
27        Handlebars.registerHelper('list', function (items, options) {

   
   

   
   

    
    
28            var out = "<div>";

   
   

   
   

    
    
29 

   
   

   
   

    
    
30            for (var i = 0, l = items.length; i < l; i++) {

   
   

   
   

    
    
31                out = out + "<div>" + options.fn(items[i]) + "</div>";

   
   

   
   

    
    
32            }

   
   

   
   

    
    
33 

   
   

   
   

    
    
34            return out + "</div>";

   
   

   
   

    
    
35        });

   
   

   
   

    
    
36 

   
   

   
   

    
    
37        var data = {

   
   

   
   

    
    
38          people: [

   
   

   
   

    
    
39            { first_name: "Alan", last_name: "Johnson", phone: "1234567890", email: "alan@test.com", member_since: "Mar 25, 2011" },

   
   

   
   

    
    
40            { first_name: "Allison", last_name: "House", phone: "0987654321", email: "allison@test.com", member_since: "Jan 13, 2011" },

   
   

   
   

    
    
41            { first_name: "Nick", last_name: "Pettit", phone: "9836592272", email: "nick@test.com", member_since: "Apr 9, 2009" },

   
   

   
   

    
    
42            { first_name: "Jim", last_name: "Hoskins", phone: "7284927150", email: "jim@test.com", member_since: "May 21, 2010" },

   
   

   
   

    
    
43            { first_name: "Ryan", last_name: "Carson", phone: "8263729224", email: "ryan@test.com", member_since: "Nov 1, 2008" }

   
   

   
   

    
    
44          ]

   
   

   
   

    
    
45        };

   
   

   
   

    
    
46         

   
   

   
   

    
    
47        $('#list').html(template(data));

   
   

   
   

    
    
48      });

   
   

   
   

    
    
49    </script>

   
   

   
   

    
    
50  </body>

   
   

   
   

    
    
51</html>

With Expressions 使用方法

一般情况下，Handlebars模板会在编译的阶段的时候进行context传递和赋值。使用with的方法，我们可以将context转移到数据的一个section里面（如果你的数据包含section）。这个方法在操作复杂的template时候非常有用。直接看完整的demo代码：

 

 
 

  
  

   
   

    
    
01<!DOCTYPE html>

   
   

   
   

    
    
02<html>

   
   

   
   

    
    
03  <head>

   
   

   
   

    
    
04    <title>Handlebars Block "with" Expressions Example</title>

   
   

   
   

    
    
05  </head>

   
   

   
   

    
    
06  <body>

   
   

   
   

    
    
07    <h1>Handlebars Expressions Example!</h1>

   
   

   
   

    
    
08<!--this is a list which will rendered by handlebars template.    --> 

   
   

   
   

    
    
09    <div id="list">

   
   

   
   

    
    
10    </div>

   
   

   
   

    
    
11     

   
   

   
   

    
    
12    <script type="text/javascript" src="script/jquery.js"></script>

   
   

   
   

    
    
13    <script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script>

   
   

   
   

    
    
14     

   
   

   
   

    
    
15    <script id="people-template" type="text/x-handlebars-template">

   
   

   
   

    
    
16      {{#people}}

   
   

   
   

    
    
17        <div class="person">

   
   

   
   

    
    
18          <p>{{title}}

   
   

   
   

    
    
19          {{#with author}}

   
   

   
   

    
    
20              By {{first_name}} {{last_name}}</p>

   
   

   
   

    
    
21          {{/with}}

   
   

   
   

    
    
22        </div>

   
   

   
   

    
    
23      {{/people}}

   
   

   
   

    
    
24    </script>

   
   

   
   

    
    
25     

   
   

   
   

    
    
26    <script type="text/javascript">

   
   

   
   

    
    
27      $(document).ready(function() {

   
   

   
   

    
    
28         

   
   

   
   

    
    
29        // compile our template

   
   

   
   

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

   
   

   
   

    
    
31 

   
   

   
   

    
    
32        var data = {

   
   

   
   

    
    
33          people: [

   
   

   
   

    
    
34            { title: "first people: ", author: {first_name: "Alan", last_name: "Johnson"},  },

   
   

   
   

    
    
35            { title: "second people: ", author: {first_name: "Jack", last_name: "een"},  },

   
   

   
   

    
    
36            { title: "third people: ", author: {first_name: "Tom", last_name: "Peter"},  },

   
   

   
   

    
    
37            { title: "fourth people: ", author: {first_name: "Asn", last_name: "Smith"},  },

   
   

   
   

    
    
38          ]

   
   

   
   

    
    
39        };

   
   

   
   

    
    
40         

   
   

   
   

    
    
41        $('#list').html(template(data));

   
   

   
   

    
    
42      });

   
   

   
   

    
    
43    </script>

   
   

   
   

    
    
44  </body>

   
   

   
   

    
    
45</html>

 

4. 使用Helpers

使用Helpers用户可以操作handlebars模板中的数据，添加相应的逻辑等等。

用户自定义Helpers

如本例中，添加formatPhoneNumber helpers，来对电话号码进行格式统一化。

Template中代码如下：

 

 
 

  
  

   
   

    
    
1{{#people}}

   
   

   
   

    
    
2<div class="person">

   
   

   
   

    
    
3  <h2>{{first_name}} {{last_name}}</h2>

   
   

   
   

    
    
4  <div class="phone">{{formatPhoneNumber phone}}</div>

   
   

   
   

    
    
5  <div class="email"><a href="mailto:{{email}}">{{email}}</a></div>

   
   

   
   

    
    
6  <div class="since">User since {{member_since}}</div>

   
   

   
   

    
    
7</div>

   
   

   
   

    
    
8{{/people}}

JavaScript中，需要使用Handlebars.registerHelper来注册helpers，代码：

 

 
 

  
  

   
   

    
    
1// add the formatPhoneNumber helper

   
   

   
   

    
    
2Handlebars.registerHelper("formatPhoneNumber", function(phoneNumber) {

   
   

   
   

    
    
3  phoneNumber = phoneNumber.toString();

   
   

   
   

    
    
4  return "(" + phoneNumber.substr(0,3) + ") " + phoneNumber.substr(3,3) + "-" + phoneNumber.substr(6,4);

   
   

   
   

    
    
5});

完整demo代码：

 

 
 

  
  

   
   

    
    
01<!DOCTYPE html>

   
   

   
   

    
    
02<html>

   
   

   
   

    
    
03  <head>

   
   

   
   

    
    
04    <title>Handlebars Helpers Example</title>

   
   

   
   

    
    
05  </head>

   
   

   
   

    
    
06  <body>

   
   

   
   

    
    
07    <h1>Handlebars Helpers Example!</h1>

   
   

   
   

    
    
08     

   
   

   
   

    
    
09    <div id="list">

   
   

   
   

    
    
10    </div>

   
   

   
   

    
    
11     

   
   

   
   

    
    
12    <script type="text/javascript" src="script/jquery.js"></script>

   
   

   
   

    
    
13    <script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script>

   
   

   
   

    
    
14     

   
   

   
   

    
    
15    <script id="people-template" type="text/x-handlebars-template">

   
   

   
   

    
    
16      {{#people}}

   
   

   
   

    
    
17      <div class="person">

   
   

   
   

    
    
18        <h2>{{first_name}} {{last_name}}</h2>

   
   

   
   

    
    
19        <div class="phone">{{formatPhoneNumber phone}}</div>

   
   

   
   

    
    
20        <div class="email"><a href="mailto:{{email}}">{{email}}</a></div>

   
   

   
   

    
    
21        <div class="since">User since {{member_since}}</div>

   
   

   
   

    
    
22      </div>

   
   

   
   

    
    
23      {{/people}}

   
   

   
   

    
    
24    </script>

   
   

   
   

    
    
25     

   
   

   
   

    
    
26    <script type="text/javascript">

   
   

   
   

    
    
27      $(document).ready(function() {

   
   

   
   

    
    
28         

   
   

   
   

    
    
29        // compile our template

   
   

   
   

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

   
   

   
   

    
    
31         

   
   

   
   

    
    
32        // add the formatPhoneNumber helper

   
   

   
   

    
    
33        Handlebars.registerHelper("formatPhoneNumber", function(phoneNumber) {

   
   

   
   

    
    
34          phoneNumber = phoneNumber.toString();

   
   

   
   

    
    
35          return "(" + phoneNumber.substr(0,3) + ") " + phoneNumber.substr(3,3) + "-" + phoneNumber.substr(6,4);

   
   

   
   

    
    
36        });

   
   

   
   

    
    
37         

   
   

   
   

    
    
38        var data = {

   
   

   
   

    
    
39          people: [

   
   

   
   

    
    
40            { first_name: "Alan", last_name: "Johnson", phone: "1234567890", email: "alan@test.com", member_since: "Mar 25, 2011" },

   
   

   
   

    
    
41            { first_name: "Allison", last_name: "House", phone: "0987654321", email: "allison@test.com", member_since: "Jan 13, 2011" },

   
   

   
   

    
    
42            { first_name: "Nick", last_name: "Pettit", phone: "9836592272", email: "nick@test.com", member_since: "Apr 9, 2009" },

   
   

   
   

    
    
43            { first_name: "Jim", last_name: "Hoskins", phone: "7284927150", email: "jim@test.com", member_since: "May 21, 2010" },

   
   

   
   

    
    
44            { first_name: "Ryan", last_name: "Carson", phone: "8263729224", email: "ryan@test.com", member_since: "Nov 1, 2008" }

   
   

   
   

    
    
45          ]

   
   

   
   

    
    
46        };

   
   

   
   

    
    
47         

   
   

   
   

    
    
48        $('#list').html(template(data));

   
   

   
   

    
    
49      });

   
   

   
   

    
    
50    </script>

   
   

   
   

    
    
51  </body>

   
   

   
   

    
    
52</html>

If helpers用法

if helpers使用方法很简单，只需要在template中添加{{if}}, 如果有else，也一样，添加{{else}}。Template中代码如下：

 

 
 

  
  

   
   

    
    
01{{#people}}

   
   

   
   

    
    
02  <div class="person">

   
   

   
   

    
    
03    <p>{{title}}

   
   

   
   

    
    
04    {{#if author}}

   
   

   
   

    
    
05       {{author.first_name}} {{author.last_name}}</p>

   
   

   
   

    
    
06    {{else}}

   
   

   
   

    
    
07       Unknown Author</p>

   
   

   
   

    
    
08    {{/if}}

   
   

   
   

    
    
09  </div>

   
   

   
   

    
    
10{{/people}}

 

Each helpers 用法

使用each方法，可以在template中添加{{this}}, 用each来遍历在data中是所有数据。Template中代码如下：

 

 
 

  
  

   
   

    
    
1{{#each people}}

   
   

   
   

    
    
2  <div class="person">

   
   

   
   

    
    
3      {{this}}

   
   

   
   

    
    
4  </div>

   
   

   
   

    
    
5{{/each}}

  

5. 使用partials

当你想要复用模板的一部分，或者将长模板分割成为多个模板方便维护时，partials就派上用场了。直接看代码比较直接，母模板定义如下：其中用>partials 来包含相应的子模板。

 
 

  
  

   
   

    
    
1<script id="people-template" type="text/x-handlebars-template">

   
   

   
   

    
    
2  {{#each people}}

   
   

   
   

    
    
3    {{> person}}

   
   

   
   

    
    
4  {{/each}}

   
   

   
   

    
    
5</script>

子模板代码：

 

 
 

  
  

   
   

    
    
1<script id="person-partial" type="text/x-handlebars-template">

   
   

   
   

    
    
2  <div class="person">

   
   

   
   

    
    
3    <h2>{{first_name}} {{last_name}}</h2>

   
   

   
   

    
    
4    <div class="phone">{{phone}}</div>

   
   

   
   

    
    
5    <div class="email"><a href="mailto:{{email}}">{{email}}</a></div>

   
   

   
   

    
    
6    <div class="since">User since {{member_since}}</div>

   
   

   
   

    
    
7  </div>

   
   

   
   

    
    
8</script>

JavaScript中需要用Handlebars.registerPartial对子模板进行注册，代码如下：

 

 
 

  
  

   
   

    
    view source
    
    print
    
    ?
   
   

  
  

  
  

   
   

    
    
01// compile our template

   
   

   
   

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

   
   

   
   

    
    
03 

   
   

   
   

    
    
04// add the person partial

   
   

   
   

    
    
05Handlebars.registerPartial("person", $("#person-partial").html());

   
   

   
   

    
    
06 

   
   

   
   

    
    
07var data = {

   
   

   
   

    
    
08  people: [

   
   

   
   

    
    
09    { first_name: "Alan", last_name: "Johnson", phone: "1234567890", email: "alan@test.com", member_since: "Mar 25, 2011" },

   
   

   
   

    
    
10    { first_name: "Allison", last_name: "House", phone: "0987654321", email: "allison@test.com", member_since: "Jan 13, 2011" },

   
   

   
   

    
    
11    { first_name: "Nick", last_name: "Pettit", phone: "9836592272", email: "nick@test.com", member_since: "Apr 9, 2009" },

   
   

   
   

    
    
12    { first_name: "Jim", last_name: "Hoskins", phone: "7284927150", email: "jim@test.com", member_since: "May 21, 2010" },

   
   

   
   

    
    
13    { first_name: "Ryan", last_name: "Carson", phone: "8263729224", email: "ryan@test.com", member_since: "Nov 1, 2008" }

   
   

   
   

    
    
14  ]

   
   

   
   

    
    
15};

   
   

   
   

    
    
16 

   
   

   
   

    
    
17$('#list').html(template(data));

所有demo代码下载地址： https://github.com/DaweiCheng/handlebarstutor 

原文链接：https://software.intel.com/zh-cn/articles/HTML5Handlebars

hsany330
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript页面模板库handlebars的简单用法
01-19
Handlebars 是一个 JavaScript 页面模板库，帮助你轻松的构建语义化模板。 代码如下: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”> <html> <head> <title>handlebars&...
handlebars 详解及使用
蒲公英芽的博客
03-29 5537
1. 前言 handlebars的使用方法和art-template 模板引擎类似，同时支持 NodeJs和浏览器。使用模板引擎的好处就是便于对代码进行维护，同时，使用模板引擎操作DOM，效率也会更高一些。个人觉得还是art-template 比较好用一些，因为工作中使用了handlebars，查看它的官方文档时，使用方法介绍的也不详细，花时间整理了一些它的常用方法，希望会对你有帮助。 如果想了解...
学习Handlebars，从这里开始
Learn-anything.cn
12-13 722
一、Handlebars 是什么？ Handlebars 是一个页面模板化工具。 1、使用场景 当网站中很多页面的排版格式是相同的，只是其中内容不同，此工具就是比较好的解决方案。更多使用建议，看这里！ 二、怎么使用？ 1、远程handlebars 通过加载 远程handlebars库，解析页面模板并加载到HTML中。通过下面5个步骤清晰展示 handlebars 怎么加载和使用。负责下面代码到 index.html 中，再用浏览器打开 index.html 即可看到效果。 <!DOCTYPE htm
JavaScript语义模板库handlebars教程
03-01 1477
前言 Web应用开发正在处于一个快速发展的时期，随着HTML5规范的落实和普及，相信会有越来越多的优秀的web应用呈现出来。JavaScript是web应用开发中是非常重要的语言，该语言有很多流行的库供大家使用。本期给大家介绍语义模板库Handlebars的使用方法。 本文示例代码已经全部上传GitHub：https://github.com/DaweiCheng/handlebars
Handlebars 的基本用法
高先生的猫
04-29 2773
Handlebars 是 JavaScript 一个语义模板库，通过对view和data的分离来快速构建Web模板。 handlebars是一款jquery插件，[ TheWrite Less, Do More ]，是中小型快速建站的极好选择。 一. 为什么要使用模板引擎 关于为什么要使用模板引擎, 就我现在的项目而言,我还停留在进行发送Ajax请求到后台后,利用模板引擎拼接接受到的JSON...
Handlebars—semantic template engine
weixin_33827590的博客
05-26 243
概述 刚接触前端的时候，师傅就给我推荐了Handlebars，自己也蛮喜欢它的语法。到现在，Handlebars都已经更新到3.0.3了，是时候重新过一遍文档了。 引入 要使用Handlebars，首先你得download，然后再页面引入，就像这样 <script src="script/lib/jquery.js">...
application-template-handlebars:应用模板——自带Handlebars
06-23
应用程序模板 - 基本 该模板旨在为 The Iron Yard 快速生成测试驱动的作业。 但是你可以用它来做任何事情！ 包括： 摩卡 柴 指示 npm install npm start 该应用程序将在并提供 /public 之外的静态资产。
JavaScript页面模板库Handlebars.zip
07-18
Handlebars.js 是一个 JavaScript 的页面模板库 标签：Handlebars
handlebars-html-parser:解析车把和HTML
04-30
handlebars-html-parser 解析车把和HTML。 解析一下： < tag> value {{{ obj.value } ~}} </ tag> 到这个： [ { type : "htmlTagStart" } , { type : "htmlTagNameStart" } , { type : "literal" , value : "tag" } ...
详解handlebars+require基本使用方法
08-31
本文主要对handlebars+require基本使用方法进行详细介绍，文章尾部会附上完整代码供大家参考。需要的朋友一起来看下吧
js模版引擎handlebars.js实用教程demo
04-04
js模版引擎handlebars.js实用教程demo
handlebars入门教程
10-21
handlebars入门教程
WebRebuild北京第一届交流会之6：《分层语义化模板实践》——张克军
12-17
WebRebuild北京第一届交流会之6： 《分层语义化模板实践》——张克军 点击tag“WebRebuild北京第一届交流会”下载全部6个PPT 北京Google技术用户组与W3C、Webrebuild联合在Google公司成功地举办了第一次Webrebuild北京交流会。
handlerbars的demo实例源码
01-09
js模版引擎handlebars.js实用教程demo。 官方+自己的总结
基于语义模板的问答系统研究
03-01
基于语义模板的问答系统研究
基于语义模板的问答系统研究 (2007年)
05-22
提出一个基于语义模板的用户交互问答系统，其中语义模板用于标识句子中各成分之间的语义关联关系。语义模板的使用有助于问题的分解和各成分间语义关联关系的研究，可提高分析精度，适宜于英文和中文问题的分析。在系统运行中，将问题和用户选择的正确答案对，存储在数据库中，通过积累知识构建知识库，实现问题自动回答。
2024-2030全球及中国PCB接触式探头行业研究及十五五规划分析报告.docx
04-18
2024-2030全球及中国PCB接触式探头行业研究及十五五规划分析报告
网站界面设计mortal0418代码
04-18
网站界面设计mortal0418代码
PHP毕业设计-校园失物招领系统源码+数据库.zip
最新发布
04-18
PHP毕业设计-校园失物招领系统源码+数据库.zip个人经导师指导并认可通过的高分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码、该项目可以直接作为毕设使用。项目都经过严格调试，确保可以运行！ PHP毕业设计-校园失物招领系统源码+数据库.zip个人经导师指导并认可通过的高分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码、该项目可以直接作为毕设使用。项目都经过严格调试，确保可以运行！ PHP毕业设计-校园失物招领系统源码+数据库.zip个人经导师指导并认可通过的高分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码、该项目可以直接作为毕设使用。项目都经过严格调试，确保可以运行！ PHP毕业设计-校园失物招领系统源码+数据库.zip个人经导师指导并认可通过的高分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可
4-11handlebars模板的使用
06-02
Handlebars是一种JavaScript模板引擎，它允许用户使用预定义的模板语法来渲染HTML标记。Handlebars的使用步骤如下： 1. 引入Handlebars库文件 在HTML文件中引入Handlebars库文件，可以使用CDN或本地文件，例如： ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值