js模版引擎handlebars.js
来源:互联网 发布:面对数据缺失,可以采用 编辑:程序博客网 时间:2024/05/17 22:29
还没有学习过javascript模板引擎的知识,主要应用类似于将结构和行为分离出来的作用,让html和Javascript分工合作,有点MVC的意味,国内的公司也有一些Javascript模板引擎,这个handlesbars看起来介绍的挺好的。
介绍
Handlebars 是 JavaScript 一个语义模板库,通过对view和data的分离来快速构建web模板。它采用"Logic-less template"(无逻辑模版)的思路,在加载时被预编译,而不是到了客户端执行到代码时再去编译,
这样可以保证模板加载和运行的速度。Handlebars兼容Mustache,你可以在Handlebars中导入Mustache模板。
使用与安装
Handlebars的安装非常简单,你只需要从github下载最新版本,你也可访问下面网址获取最新信息:http://handlebarsjs.com。
目前handlebars.JS已经被许多项目广泛使用了,handlebars是一个纯js库,因此你可以像使用其他JS脚本一样用script标签来包含handlebars.js
<script type="text/javascript" src=".js/handlebars.js"></script>
基本语法
Handlebars expressions 是handlebars模板中最基本的单元,使用方法是加两个花括号{{value}}
, handlebars模板会自动匹配相应的数值,对象甚至是函数。
例如:
<div class="demo"> <h1>{{name}}</h1> <p>{{content}}</p></div>
你可以单独建立一个模板,ID(或者class)和type很重要,因为你要用他们来获取模板内容
例如:
<script id="tpl" type="text/x-handlebars-template"> <div class="demo"> <h1>{{title}}</h1> <p>{{content.title}}</p> </div></script>
handlebars会根据上下文来自动对表达式进行匹配,如果匹配项是个变量,则会输出变量的值,如果匹配项是个函数,则函数会被调用。
如果没找到匹配项,则没有输出。表达式也支持点操作符,因此你可以使用{{content.title}}
这样的形式来调用嵌套的值或者方法,
handlebars会根据当前上下文输出content变量的title属性的值。
在JavaScript中,使用Handlebars.compile()
方法来预编译模板
例如:(这是一套规则)
//code from http://caibaojian.com/handlebars-js.html //用jquery获取模板 var tpl = $("#tpl").html(); //原生方法 var source = document.getElementById('#tpl').innerHTML; //预编译模板 var template = Handlebars.compile(source); //模拟json数据 var context = { name: "zhaoshuai", content: "learn Handlebars"}; //匹配json内容 var html = template(context); //输入模板 $(body).html(html);
Handlebar的表达式
Block表达式
有时候当你需要对某条表达式进行更深入的操作时,Blocks就派上用场了,在Handlebars中,你可以在表达式后面跟随一个#号来表示Blocks,然后通过{{/表达式}}
来结束Blocks。
如果当前的表达式是一个数组,则Handlebars会“自动展开数组”,并将Blocks的上下文设为数组中的元素。
例如:
<ul> {{#programme}} <li>{{language}}</li>{{/programme}}</ul>
有以下JSON数据
{ programme: [ {language: "JavaScript"}, {language: "HTML"}, {language: "CSS"} ]}
编译模板代码同上……
上面的代码会自动匹配programme
数据并展开数据,渲染DOM后就是这样的
<ul> <li>JavaScript</li> <li>HTML</li> <li>CSS</li></ul>
Handlebars的内置块表达式(Block helper)
1.each block helper
你可以使用内置的{{#each}}
helper遍历列表块内容,用this
来引用遍历的元素
例如:
<ul> {{#each name}} <li>{{this}}</li> {{/each}}</ul>
对应适用的json数据
{ name: ["html","css","javascript"]};
这里的this
指的是数组里的每一项元素,和上面的Block很像,但原理是不一样的这里的name是数组,而内置的each就是为了遍历数组用的,更复杂的数据也同样适用。
2.if else block helper
{{#if}}
就你使用JavaScript一样,你可以指定条件渲染DOM,如果它的参数返回false,undefined, null, "" 或者 [] (a "falsy" value)
,
Handlebar将不会渲染DOM,如果存在{{#else}}
则执行{{#else}}
后面的渲染
例如:
{{#if list}}<ul id="list"> {{#each list}} <li>{{this}}</li> {{/each}}</ul> {{else}} <p>{{error}}</p>{{/if}}
对应适用json数据
var data = { info:['HTML5','CSS3',"WebGL"], "error":"数据取出错误"}
via这里{{#if}}
判断是否存在list数组,如果存在则遍历list,如果不存在输出错误信息原文来自:http://caibaojian.com/handlebars-js.html
3.unless block helper
{{#unless}}
这个语法是反向的if语法也就是当判断的值为false
时他会渲染DOM
例如:
{{#unless data}}<ul id="list"> {{#each list}} <li>{{this}}</li> {{/each}}</ul> {{else}} <p>{{error}}</p>{{/unless}}
4.with block helper
{{#with}}
一般情况下,Handlebars模板会在编译的阶段的时候进行context传递和赋值。使用with的方法,我们可以将context转移到数据的一个section里面(如果你的数据包含section)。
这个方法在操作复杂的template时候非常有用。
<div class="entry"> <h1>{{title}}</h1> {{#with author}} <h2>By {{firstName}} {{lastName}}</h2> {{/with}}</div>
对应适用json数据
{ title: "My first post!", author: { firstName: "Charles", lastName: "Jolley" }}
Handlebar的注释(comments)
Handlebars也可以使用注释写法如下
{{! handlebars comments }}
Handlebars的访问(Path)
Handlebar支持路径和mustache
,Handlebar还支持嵌套的路径,使得能够查找嵌套低于当前上下文的属性
可以通过.
来访问属性也可以使用../
,来访问父级属性。
例如:(使用.
访问的例子)
<h1>{{author.id}}</h1>
对应json数据
{ title: "My First Blog Post!", author: { id: 47, name: "Yehuda Katz" }, body: "My first post. Wheeeee!" };
例如:(使用../
访问)
{{#with person}} <h1>{{../company.name}}</h1>{{/with}}
对应适用json数据
{ "person": { "name": "Alan" }, company: {"name": "Rad, Inc." }};
自定义helper
Handlebars,可以从任何上下文可以访问在一个模板,你可以使用Handlebars.registerHelper()
方法来注册一个helper。
调试技巧
把下面一段"debug helper"加载到你的JavaScript代码里,然后在模板文件里通过{{debug}}
或是{{debug someValue}}
方便调试数据
Handlebars.registerHelper("debug", function(optionalValue) { console.log("Current Context"); console.log("===================="); console.log(this); if (optionalValue) { console.log("Value"); console.log("===================="); console.log(optionalValue); }});
handlebars的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);$('#content').handlebars($('#template'), { name: "Alan" });
关于JS模板引擎的一些阅读:
- 1.浅析JS模板引擎 http://blog.csdn.net/meikidd/article/details/8931904
- 2.高性能Javascript模板引擎原理解析 http://cdc.tencent.com/?p=5723
- 3.如何选择需要的模板引擎 http://garann.github.io/template-chooser/
- 4.JS模板引擎对比 http://blog.csdn.net/wuchengzhi82/article/details/8938122
- js模版引擎handlebars.js实用教程 http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html
- js模版引擎handlebars.js
- js模版引擎handlebars.js
- js模版引擎handlebars.js
- 介绍一款js模版引擎handlebars
- handlebars.js模版引擎入门案例
- Js模版引擎handlebars.js实用教程——目录
- js模版引擎handlebars.js实用教程——目录
- js模版引擎handlebars.js实用教程——目录
- js模版引擎handlebars.js实用教程——目录
- Handlebars js模版
- Handlebars js模版
- js模版引擎handlebars.js实用教程——为什么选择Handlebars.js
- JavaScript页面模版引擎handlebars.js学习及使用
- handlebars.js模版引擎中EACH循环遍历的使用
- Handlebars.js 模板引擎
- 模板引擎 Handlebars.js
- Handlebars.js 模板引擎
- Handlebars.js 模板引擎
- SQL SERVER 开窗函数简介
- TypedArray的用法和declare-styleable:自定义控件的属性
- SQL语言对MySQL的操作总结
- PSU打oracle的时候显示已经succeed
- NSMutableAttributedString实现富文本 (实现不同颜色和字体、下划线)
- js模版引擎handlebars.js
- js--事件--事件流
- python 发送邮件(QQ邮箱)
- intent 常用方法
- java基础5_运算符_语句_方法
- 【计算机图形学】过取样反走样与区域取样
- 养成好习惯
- 剑指Offer——知识点储备-常用算法
- CNN卷积神经网络推导和实现