魔兽世界样式的tooltip,Handlebars的简单使用

日期:2019-12-05编辑作者:服务器

{{title}}

{{body}}

示例很简单,具体详情可参考ThinkVitamin的文章 Getting Started with Handlebars.js,希望大家能够喜欢。

***********这只是基础部分,还要更深入的学习要访问官网*************。

{{title}}

{{greeting}}

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

??接下来的工作就是用HandleBars来处理上面的模板,生成页面内容,表达式相当于是模板中的占位符,它会被相应的值替换掉,替换表达式的值可以用JSON方式来书写,代码如下所示。

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

text-shadow的立体效果,opacity透明;

Handlebars 是一个 JavaScript 页面模板库,帮助你轻松的构建语义化模板。

2. Expressions

表达式中的任何html代码将会被自动忽略,这是一个非常实用的性能,但是有的时候我们需要解析html,那么就要用三个花括号{{{ }}}

图片 1

image.png

{{firstName}} {{lastName}}

{{/if}}

??也就是说,上面的代码在上下文中没有author定义的情况下,会产生下面的输出:

 

unless:作用与if正好相反。 each:可以对数组进行迭代。在迭代时还可以使用{{@index}}表示第几次循环,可以用{{@key}}表示对象的属性名。

  • {{#each persons}}

    • {{this}}
    • {{/each}}

    ??上下文数据如下所示:

    { persons:["骆昊", "王大锤", "张三丰"] }
    

    ??更多的内容可以关注HandleBars的官方网站关于内置帮助器的内容。

    ??可以使用jQuery封装的Ajax函数从服务器获取JSON格式的上下文数据,代码如下所示:

    $.getJSON("HelloServlet", {}, function(context) {
        var targetCode = template(context);
        templateSection.replaceWith(targetCode);
    });
    

    ??HandleBars的官方网站还提供了HandleBars的参考手册。

- HandleBars ??Handlebars是一个Javascript模板引擎,能让你轻松高效的编写语义化模板,它是Mustache模板引擎的一个扩展,...

Modernizr,Html5,Css3特性检测库

handlebars

使用

{{{title}}}

{{greeting}}

{{!-- 下面是一个块表达式 --}} {{#foreach persons}} {{f name}}{{t gender}}: {{age}} {{/foreach}} </script> <script type="text/javascript" src="js/handlebars.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> // 注册一个帮助器(块表达式处理器) Handlebars.registerHelper("foreach", function(items, options) { var out = "

  • "; for(var i = 0, len = items.length; i < len; ++i) { out += "

    • " + options.fn(items[i]) + "
    • "; } return out + "

    "; }); // f帮助器从名字中取出姓氏 Handlebars.registerHelper("f", function(name) { return name.charAt(0); // 假定都是中文姓名且都是单姓(只是一个小例子而已不要叫真是否合理) }); // t帮助器根据性别输出先生或女士 Handlebars.registerHelper("t", function(gender) { return gender ? "先生" : "女士"; }); var templateSection = $("#foo"); var sourceCode = templateSection.html(); var template = Handlebars.compile(sourceCode); var context = { title:"Hello, world! &gt;&gt;", greeting:"这是一个使用HandleBars的简单例子", persons: [ {name:"骆昊", gender:true, age:34}, {name:"王大锤", gender:false, age:25}, {name:"张三丰", gender:true, age:120} ] }; var targetCode = template(context); templateSection.replaceWith(targetCode); </script>

??运行效果如下图所示。
图片 2

??当然,HandleBars已经内置了最常用的块处理器。

if:如果参数值是false、undefined、null、""、0或[],HandlerBars就不会渲染块表达式。代码如下所示:

{{#if author}}


复制代码 代码如下:

简介

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

下载

??可以在HandleBars的官方网站下载它的js文件,然后将其加入到你的项目中。如果你的Web项目中已经有一个名为js的文件夹专门放置JavaScript文件,这个位置就是极好的选择。下面的例子在WebStorm中的项目结构如下图所示。
图片 3

参考的代码

4.Helpers

Handlebars不允许在模板中使用javascript,而是提供了一些列的功能函数(helpers),可以在模板中调用,方便代码重用和创造复杂模板。使用表达式调用helpers的格式类似如此,{{helpername}},同时也可以传递参数,{{helpname 12345}},开发新的helper,使用registerHelper function。

图片 4

image.png

{{{title}}}

{{greeting}}

</script> <script type="text/javascript" src="js/handlebars.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> var templateSection = $("#foo"); var sourceCode = templateSection.html(); var template = Handlebars.compile(sourceCode); var context = {title:"Hello, world! &gt;&gt;", greeting:"这是一个使用HandleBars的简单例子"}; // 注意字符串中有实体替换符 var targetCode = template(context); templateSection.replaceWith(targetCode); </script>

??HandleBars最让人激动的特性应该是块表达式以及自定义帮助器(块表达式处理器),下面的例子演示了块表达式的使用。

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

<script>
    var num = 100;
    for (var i=num-5;i<num+5;i++){
        // console.log(typeof(i));
        console.log("i");
    }
</script>

 

5. Block helpers

Block helpers像普通的功能函数一样,但是有开始和结束标签(类似于内置的#if、#each等),可以修改包含的html的内容。创建更为复杂一些,当时功能更加强大。经常使用它们重复使用功能、创建一大段可重用的html等。同样使用Handlebars.registerHelper()创建block helper,不同的是我们需要使用第二参数,回调函数。

图片 5

image.png

JavaScript模板引擎初探 - HandleBars

??Handlebars是一个Javascript模板引擎,能让你轻松高效的编写语义化模板,它是Mustache模板引擎的一个扩展,Handlebars和Mustache都是弱逻辑的模板(logic-less template)引擎,能将Web前端的视图和数据分离,降低两者之间耦合。
??Handlebars的特点是一切都是表达式,没有操作数据的API,不污染HTML标签,和DeDeCMS、WordPress模板类似,因此能很方便的与其他前端JS库(例如jQuery)混用,并且编写简单,易于扩展。Handlebars支持的浏览器及运行环境有:Internet Explorer 6+、Google Chrome、Firefox、Safari 5+、Opera 11+以及Node.js。Handlebars是Ember.js的默认模板引擎,同时也是基于Node.js的框架Clouda+、Meteor的默认模板引擎。

 上面JS部分就是鼠标事件

1.Templates

当您引入库之后,我们可以愉快的书写模板了,推荐的方式是通过特殊type的script标签来添加模板,type属性是非常重要的,否则浏览器会将它们看做javascrip解析。
  模板具有一个很容易理解的语法,可以使用html、普通文本和表达式,表达式通常被包含在两对或三对花括号里,可以包含变量或功能函数,模板需要编译之后才能使用。

图片 6

image.png

{{title}}

{{greeting}}

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

??在上面的代码中,使用了HandleBars的表达式,HandleBars的表达式是写在{{ … }}中的代码。接下来我们将刚才添加的那段代码做成一个模板,做法很简单用一个<script>标签来包围那段代码。

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

 

3.Context

Handlebars利用了Mustache的强大特性,context就是其中之一。我们可以把需要传递的数据放在这个javascript对象中,使用#each、#with等方法可以方便的使用该对象的数据。

图片 7

image.png

用法

??首先在项目中引入HandleBars和jQuery的外部JavaScript文件,注意jQuery不是必须的,但是你必须承认它是一个非常优秀的JavaScript库,它兑现了“写得更少,做得更多”(Write Less, Do More)的承诺,使用jQuery提供的强大的选择器以及它对DOM和Ajax操作的封装还是能省不少事。所以,在下面的项目中我将HandleBars和jQuery都加入到了HTML页面中。

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

??HandleBars的模板和普通的HTML页面几乎没有区别,我们向上面的代码中加入一段内容。

<script>
    var num = "100";
    for (var i=num-5;i<num+5;i++){
        // console.log(typeof(i));
        console.log("i");
    }
</script>

安装

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

{{{title}}}

{{greeting}}

{{#foreach persons}} {{name}}: {{age}} {{/foreach}} </script> <script type="text/javascript" src="js/handlebars.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> // 注册一个帮助器(块表达式处理器) Handlebars.registerHelper("foreach", function(items, options) { var out = "

  • "; for(var i = 0, len = items.length; i < len; ++i) { out += "

    • " + options.fn(items[i]) + "
    • "; } return out + "

    "; }); var templateSection = $("#foo"); var sourceCode = templateSection.html(); var template = Handlebars.compile(sourceCode); var context = { title:"Hello, world! &gt;&gt;", greeting:"这是一个使用HandleBars的简单例子", persons: [ {name:"Hao LUO", age:34}, {name:"王大锤", age:25}, {name:"张三丰", age:120} ] }; var targetCode = template(context); templateSection.replaceWith(targetCode); </script>

??再看一个例子吧。

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

CSS部分:图标的出现,样式等

{{title}}

{{greeting}}

</script> <script type="text/javascript" src="js/handlebars.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> var templateSection = $("#foo"); // 获得ID为foo的元素(模板代码段)的jQuery对象 var sourceCode = templateSection.html(); // 获得模板段的HTML代码 var template = Handlebars.compile(sourceCode); // 用Handlebars的compile对模板进行编译 var context = {title:"Hello, world!", greeting:"这是一个使用HandleBars的简单例子"}; // 用JSON保存数据 var targetCode = template(context); // 将模板中的占位符替换成相应的数据得到最终的HTML代码 templateSection.replaceWith(targetCode); // 将原来的模板段替换成最终的HTML代码 </script>

??需要注意的是,如果替换占位符的字符串中包含实体替换符(如:版权所有?、货币符号¥、右尖括号>),那么在书写HandleBars的表达式时应当用{{{ … }}},可以试一试下面的代码。

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

``

.wow-item {
    position: absolute;
    color: white;
    background-color: rgba(10, 0, 5, 0.8);
    font-family: "friz", serif;
    font-size: 12px;
    font-weight: normal;
    padding: 0.5em 0.6em;
    text-shadow: 0 1px 0 black;
    box-shadow: -1px -1px 1px rgba(10, 0, 5, 0.5), -1px 1px 1px rgba(10, 0, 5, 0.5), 1px 1px 1px rgba(10, 0, 5, 0.5), 1px -1px 1px rgba(10, 0, 5, 0.5);
    max-width: 24em;
    -webkit-transition: opacity 0.05s ease-out 0.05s, transform 0.1s ease-out 0.05s;
    -o-transition: opacity 0.05s ease-out 0.05s, transform 0.1s ease-out 0.05s;
    transition: opacity 0.05s ease-out 0.05s, transform 0.1s ease-out 0.05s;
}

.wow-item.hidden {
    visibility: hidden;
    opacity: 0;
    -webkit-transform: scale(0.95);
    -ms-transform: scale(0.95);
    -o-transform: scale(0.95);
    transform: scale(0.95);
    -webkit-transition: opacity 0.05s ease-out 0.05s, transform 0.1s ease-out 0.05s, visibility 0.01s linear 0.15s;
    -o-transition: opacity 0.05s ease-out 0.05s, transform 0.1s ease-out 0.05s, visibility 0.01s linear 0.15s;
    transition: opacity 0.05s ease-out 0.05s, transform 0.1s ease-out 0.05s, visibility 0.01s linear 0.15s;
}

.wow-icon, .wow-item {
    border-style: solid;
    border-width: 5px;
    border-image: url(../img/wow-tooltip-border-2.png) 5 repeat;
    border-radius: 4px;
}

$wowIcons.on('mouseover.wow', function (e) {
    var $this = $(this);
    var $html;
    if (!lastHovered || !lastHovered.is($this)) {
        var id = $this.data('item-id');
        $html = $(template(items[id]));
        $body.find('.wow-item').remove();
        $body.append($html);
        $html.css({
            left: e.clientX + 20,
            top: e.clientY - 10
        });
        lastHovered = $this;
    } else {
        $html = $('.wow-item');
    }
    setTimeout(function () {
        $html.removeClass('hidden');
    }, 10);
    $this.on('mousemove.wow', function (e) {
        $html.css({
            left: e.clientX + 20,
            top: e.clientY - 30
        });
    });
});
$wowIcons.on('mouseout.wow', function (e) {
    $body.find('.wow-item').addClass('hidden');
    $(this).off('mousemove.wow');
});
$body.on('mouseover.wow', '.wow-item', function (e) {
});
$body.on('mouseout.wow', '.wow-item', function (e) {
    $(this).addClass('hidden');
});

因为"100" - 5是95,而"100" + 5是1005

这段代码控制台会输出10次i;

 

Jade,Ejs,Handlebars三种模板的对比;

 

Handlebars.js 模板引擎

这段代码会输出几百次i;是为什么??区别仅仅是赋值给变量num的是字符串或数字

本文由澳门金莎娱乐网站发布于服务器,转载请注明出处:魔兽世界样式的tooltip,Handlebars的简单使用

关键词:

js的IIS扩展iisnode安装配置笔记_node,js的IIS扩展

然后把程序入口改为launch.js: 相关文章 相关搜索: 今天看啥 搜索技术库 返回首页 iOS9隐藏技能:第三方应用消息快...

详细>>

澳门金莎娱乐网站:javascript处理表单示例_基础知

以上就是本文的全部内容了,希望对大家能够有所帮助。 EasyUI中实现form表单提交的示例分享 这里给大家分享的是一...

详细>>

最近一段时间的一些学习,EasyUI实现二级页面的

EasyUI,在增、删的时候,经常用到二级页面进行勾选。 EasyUI实现二级页面的内容勾选的方法  在使用EasyUI的时候,我...

详细>>

使用requestAnimationFrame做动画效果一,Javascript动画

假设有这样一个动画功能需求:把一个div的宽度从100px变化到200px。写出来的代码可能是这样的:复制代码 代码如下...

详细>>