当前位置:网站首页 / web开发 / 正文

[ay web]写给ay的123篇web前端博客【1】-handlebars.js[1/2]

时间:2015年12月30日 | 作者 : aaronyang | 分类 : web开发 | 浏览: 1204次 | 评论 0

2015-12-30 19:50:58   www.ayjs.net独家拥有,未经许可,不许转载,违者追究法律责任

官网:handlebarsjs.com

ay百度云:http://pan.baidu.com/s/1getMROf

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

新建1.html

使用demo1:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>handlebars的aydemo</title>
    <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
    <script src="handlebars-v4.0.5.js" type="text/javascript"></script>
</head>

<body>
    <script id="tpl" type="text/x-handlebars-template">
        <div>
            <h1>{{name}}</h1>
            <p>{{content}}</p>
        </div>
    </script>
</body>
<script>
      //用jquery获取模板
    var tpl   =  $("#tpl").html();
    //原生方法
    // var source = document.getElementById('#tpl').innerHTML;
    //预编译模板
    var template = Handlebars.compile(tpl);
    //模拟json数据
    var context = { name: "ay", content: "learn Handlebars"};
    //匹配json内容
    var html = template(context);
    //输入模板
    $("body").html(html);
</script>
</html>

模板块用

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

包括住,用json的key,在template中用{{ }}来使用,如果带有层级的,用 a.b.c类似这种的形式,使用和显示值

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>handlebars的aydemo</title>
    <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
    <script src="handlebars-v4.0.5.js" type="text/javascript"></script>
</head>

<body>
    <script id="tpl" type="text/x-handlebars-template">
        <div>
            <h1>{{name}}</h1>
             <p>会的web技术:{{tech.web}}</p>
            <p>{{content}}</p>
        </div>
    </script>
</body>
<script>
      //用jquery获取模板
    var tpl   =  $("#tpl").html();
    //原生方法
    // var source = document.getElementById('#tpl').innerHTML;
    //预编译模板
    var template = Handlebars.compile(tpl);
    //模拟json数据
    var context = { name: "ay",tech:{"web":"js,html,css,less,angularjs","cs":"winform,wpf,bolt,qt"}, content: "learn Handlebars"};
    //匹配json内容
    var html = template(context);
    //输入模板
    $("body").html(html);
</script>
</html>

效果图:

blob.png


数组的操作

#数组名 开始,/ 数组名 结束

   //模拟json数据
    var context = { name: "ay",tech:{"web":"js,html,css,less,angularjs","cs":"winform,wpf,bolt,qt"}, content: "learn Handlebars",friends:[
        {"love":"夫人"},
        {"love":"妈妈"},
        {"love":"弟弟"},
        {"love":"爸爸"},
    ]};
    <script id="tpl" type="text/x-handlebars-template">
        <div class="demo">
            <h1>{{name}}</h1>
            <p>会的web技术:{{tech.web}}</p>
            <p>{{content}}</p>
            <ul>
                 {{#friends}}
                    <li>{{love}}</li>            
                 {{/friends}}
            </ul>
           
        </div>
    </script>

效果图:

blob.png

2015-12-30 19:50:58   www.ayjs.net独家拥有,未经许可,不许转载,违者追究法律责任

内置表达式

#each  this获得每次迭代的实例

var context = { name: "ay",tech:{"web":"js,html,css,less,angularjs","cs":"winform,wpf,bolt,qt"}, content: "learn Handlebars",friends:[
        {"love":"夫人"},
        {"love":"妈妈"},
        {"love":"弟弟"},
        {"love":"爸爸"},
    ],sports:["羽毛球","乒乓球","高尔夫"]};
 <script id="tpl" type="text/x-handlebars-template">
        <div class="demo">
            <h1>{{name}}</h1>
            <p>会的web技术:{{tech.web}}</p>
            <p>{{content}}</p>
            <ul>
                 {{#friends}}
                    <li>{{love}}</li>            
                 {{/friends}}
            </ul>
             <ul>
                 {{#each sports}}
                    <li style="color:green">{{this}}</li>            
                 {{/each}}
            </ul>
        </div>
    </script>

效果图:

blob.png



同样的json,我们把friends的love遍历出来

   <ul>
                 {{#each friends}}
                    <li style="color:blue">{{this.love}}</li>            
                 {{/each}}
            </ul>

效果:

blob.png


#if 和 {{else}}  判断是否存在

这次首先我们的json搞复杂点,就是2个ay,第二个ay,没有sports节点

   var context = {"persons":[{ name: "ay",tech:{"web":"js,html,css,less,angularjs","cs":"winform,wpf,bolt,qt"}, content: "learn Handlebars",friends:[
        {"love":"夫人"},
        {"love":"妈妈"},
        {"love":"弟弟"},
        {"love":"爸爸"},
        ],sports:["羽毛球","乒乓球","高尔夫"]},{name: "不喜欢运动的ay",tech:{"web":"js,html,css,less,angularjs","cs":"winform,wpf,bolt,qt"}, content: "learn Handlebars",friends:[
        {"love":"夫人"},
        {"love":"妈妈"},
        {"love":"弟弟"},
        {"love":"爸爸"},
    ]}]};

首先肯定整个模板都是each包裹的

  <script id="tpl" type="text/x-handlebars-template">
        <!--<div class="demo">
            <h1>{{name}}</h1>
            <p>会的web技术:{{tech.web}}</p>
            <p>{{content}}</p>
            <ul>
                {{#friends}}
                <li>{{love}}</li>
                {{/friends}}
            </ul>
            <ul>
                {{#each sports}}
                <li style="color:green">{{this}}</li>
                {{/each}}
            </ul>
            <ul>
                {{#each friends}}
                <li style="color:blue">{{this.love}}</li>
                {{/each}}
            </ul>
        </div>-->
        {{#each persons}}
            <div class="person">
                <h1>{{this.name}}</h1>
                <p>会的web技术:{{this.tech.web}}</p>
                <p>{{this.content}}</p>
                <ul>
                    {{#this.friends}}
                    <li>{{this.love}}</li>
                    {{/this.friends}}
                </ul>
                <ul>
                    {{#each this.sports}}
                    <li style="color:green">{{this.this}}</li>
                    {{/each}}
                </ul>
                <ul>
                    {{#each this.friends}}
                    <li style="color:blue">{{this.this.love}}</li>
                    {{/each}}
                </ul>
            </div>
        {{/each}}
    </script>

效果图:

blob.png

貌似一切正常,按F12,查看代码

blob.png

中间有个空白的ul标签,只是没有数据,遍历出来罢了,我们可以用#if来判断是否存在,我们来改写代码

 {{#each persons}}
            <div class="person">
                <h1>{{this.name}}</h1>
                <p>会的web技术:{{this.tech.web}}</p>
                <p>{{this.content}}</p>
                <ul>
                    {{#this.friends}}
                    <li>{{this.love}}</li>
                    {{/this.friends}}
                </ul>
                {{#if this.sports}}
                    <ul>
                        {{#each this.sports}}
                        <li style="color:green">{{this.this}}</li>
                        {{/each}}
                    </ul>
                 {{/if}}
                <ul>
                    {{#each this.friends}}
                    <li style="color:blue">{{this.this.love}}</li>
                    {{/each}}
                </ul>
            </div>
        {{/each}}

blob.png

这里为了演示else,我们再改下代码输出

      {{#if this.sports}}
                    <ul>
                        {{#each this.sports}}
                        <li style="color:green">{{this.this}}</li>
                        {{/each}}
                    </ul>
                    {{else}}
                    <p style="color:red">此人不爱运动</p>
                 {{/if}}

blob.png



#unless 跟#if相反的,如果是false,就渲染下面的html代码,#if是true的时候渲染,上面的代码等同于下面的代码:

  {{#unless this.sports}}
                      <p style="color:pink">此人不爱运动(unless方式)</p>
                  
                    {{else}}
                    <ul>
                        {{#each this.sports}}
                        <li style="color:green">{{this.this}}</li>
                        {{/each}}
                    </ul>

效果如下:

blob.png

2015-12-30 19:50:58   www.ayjs.net独家拥有,未经许可,不许转载,违者追究法律责任


{{#with}}

一般情况下,Handlebars模板会在编译的阶段的时候进行context传递和赋值。使用with的方法,我们可以将context转移到数据的一个section里面(如果你的数据包含section)。 这个方法在操作复杂的template时候非常有用。

相当于,限定了一个范围,类似命名空间一样的,下面的属性,不用再加上前面的指定的父key了。

   <p>测试#with</p>
                {{#with tech}}
                    <h2>我的cs开发爱好是{{cs}}</h2>
                    <h2>我的web开发爱好是{{web}}</h2>
                {{/with}}

不需要类似使用tech.cs,tech.web了,当然你也可以使用传统方式

效果图:

blob.png


修改json,加个schoolname

   var context = {schoolname:"合肥ayjs自学中心","persons":[{ name: "ay",tech:{"web":"js,html,css,less,angularjs","cs":"winform,wpf,bolt,qt"}, content: "learn Handlebars",friends:[
        {"love":"夫人"},
        {"love":"妈妈"},
        {"love":"弟弟"},
        {"love":"爸爸"},
        ],sports:["羽毛球","乒乓球","高尔夫"]},{name: "不喜欢运动的ay",tech:{"web":"js,html,css,less,angularjs","cs":"winform,wpf,bolt,qt"}, content: "learn Handlebars",friends:[
        {"love":"夫人"},
        {"love":"妈妈"},
        {"love":"弟弟"},
        {"love":"爸爸"},
    ]}]};

通过 ../ 访问父级别的属性,2次就是向上2级了

   <p>测试#with</p>
                {{#with tech}}
                    <h2>我的cs开发爱好是{{cs}}</h2>
                    <h2>我的web开发爱好是{{web}}</h2>
                    <h2>我的母校:{{../../schoolname}}</h2>
                {{/with}}

blob.png





handlebars.js模版中的注释:

blob.png

自定义helper

Handlebars,可以从任何上下文可以访问在一个模板,你可以使用Handlebars.registerHelper()方法来注册一个helper。

把下面一段"debug helper"加载到你的JavaScript代码里,然后在模板文件里通过{{debug}}或是{{debug someValue}}方便调试数据

自己新建个js类

Handlebars.registerHelper("debug", function(optionalValue) {  
  console.log("Current Context");
  console.log("====================");
  console.log(this);
  if (optionalValue) {
    console.log("Value");
    console.log("====================");
    console.log(optionalValue);
  }
});

blob.png

然后我们引用进去

blob.png


handlebars的jquery插件

使用:

blob.png

blob.png


把他封装成jquery插件,简单使用:

(function($) {
    var compiled = {};
    $.fn.handlebars = function(template, data) {
        if (template instanceof jQuery) {
            template = $(template).html();
        }
    compiled[template] = Handlebars.compile(template);
    this.html(compiled[template](data));
    };
})(jQuery);

blob.png

使用方法如下:

<script>
   
     var context = {"schoolname":"合肥ayjs自学中心","persons":[{ name: "ay",tech:{"web":"js,html,css,less,angularjs","cs":"winform,wpf,bolt,qt"}, content: "learn Handlebars",friends:[
        {"love":"夫人"},
        {"love":"妈妈"},
        {"love":"弟弟"},
        {"love":"爸爸"},
        ],sports:["羽毛球","乒乓球","高尔夫"]},{name: "不喜欢运动的ay",tech:{"web":"js,html,css,less,angularjs","cs":"winform,wpf,bolt,qt"}, content: "learn Handlebars",friends:[
        {"love":"夫人"},
        {"love":"妈妈"},
        {"love":"弟弟"},
        {"love":"爸爸"},
    ]}]};
  
$('body').handlebars($('#tpl'), context);
</script>


效果等同于上面一样


2015-12-30 19:50:58   www.ayjs.net独家拥有,未经许可,不许转载,违者追究法律责任

推荐您阅读更多有关于“handlebarsweb前端,”的文章

猜你喜欢

额 本文暂时没人评论 来添加一个吧

发表评论

必填

选填

选填

必填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

  查看权限

抖音号:wpfui,可以看到我的很多作品效果

AYUI8社区版Github地址:前往获取

作者:杨洋(AaronYang简称AY,安徽六安人)目前是个人,还没公司AY唯一QQ:875556003和AY交流

高中学历,2015年1月17日开始,兴趣学习研究WPF,目前工作繁忙,不接任何活

声明:AYUI7个人与商用免费,源码可购买。部分DEMO不免费.AY主要靠卖技术服务挣钱

不是从我处购买的ayui7源码,我不提供任何技术服务,如果你举报从哪里买的,我可以帮你转正为我的客户,并送demo

查看捐赠

AYUI7.X MVC教程 更新如下:

第一课 第二课 程序加密教程

兼容XP到win10,vs2015/2017/2019,最新AYUI:7.6.5.5

vs2015 企业版密钥HM6NR-QXX7C-DFW2Y-8B82K-WTYJV

vs2017 企业版密钥NJVYC-BMHX2-G77MM-4XJMR-6Q8QF

标签列表