摘要:兼容语法,在大多数情况下它可以读取的语法并在你当前模板中使用。不要直接把它放在中否则的解析会改变模板内容。的路径支持简单的路径,就像也支持嵌套的属性,比如对象的属性模板工作的对象这使得使用模板处理字符串成为可能。这种行为是新的,支持。
介绍
Handlebars 让你能够有能力高效地容易地创立语义化的模版。Handlebars兼容Mustache语法,在大多数情况下它可以读取Mustache的语法并在你当前模板中使用。具体点击这里
安装下载
npm install --save handlebars
bower install --save handlebars
具体参考
开始使用Handlebars 模板看起来就像嵌套handlebars表达式的规范的HTML。
{{title}}
{{body}}
handlebars表达式: {{ cnt }}
你也可以通过标签包裹handlebars表达式传递模板给浏览器:
你必须把模板放在标签里,这很重要。不要直接把它放在HTML中否则HTML的解析会改变模板内容。
在JavaScript中,使用Handlebars.compile来编译模板:
var source = $("#entry-template").html(); var template = Handlebars.compile(source); // ‘entry-template’就是包裹模板的script的id
注意这种方法在产品应用中不推荐使用。更好的方法是预编译你的模版。这将使要求的运行库更小,模板不必在浏览器中编译,显著地节省了时间。这在移动设备上尤为重要。
在JavaScript中,使用Handlebars.compile()方法来预编译模板 例如:(这是一套规则)
//用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);
通过解析context处理handlebars模板获取HTML内容:
var context = {title: "My New Post", body: "This is my first post!"}; var html = template(context);
输出html:
HTML转码My New Post
This is my first post!
Handlebars 的转码HTML值通过{{expression}}返回. 如果你不想handlebars转码一个值的话,使用{{{expression}}}
{{title}}
{{{body}}}
上下文内容:
{ title: "All aboutTags", body: "
This is a post about
tags
" }
输出:
All About
Tags
This is a post about
tags
Handlebars 不会转义 Handlebars.SafeString. 如果你写了输出本身所含HTML的辅助 helper, 你其实想返回一个新的Handlebars.SafeString.在这种情况下,你想手动拼接参数.
Handlebars.registerHelper("link", function(text, url) { text = Handlebars.Utils.escapeExpression(text); url = Handlebars.Utils.escapeExpression(url); var result = "" + text + ""; return new Handlebars.SafeString(result); });
这样可以避免字符串被转码,正确响应参数,即使你不适用{{{也不会被转码。
块级表达式块级表达式 允许你定义一个可以触发一个与当前不同的上下文来替换模板的相应内容的helper。这些块级辅助helper通过在helper的名字前加#并在结束时名字前加/:
{{#list people}}{{firstName}} {{lastName}}{{/list}}
渲染context:
{ people: [ {firstName: "Yehuda", lastName: "Katz"}, {firstName: "Carl", lastName: "Lerche"}, {firstName: "Alan", lastName: "Johnson"} ] }
我们会创建一个叫list的helper输出HTML列表。该列表以people为第一个参数,哈希选项为第二个参数。这些选项里包含一条名为fn的属性,在handlebars模板中通过这些属性名获取值
Handlebars.registerHelper("list", function(items, options) { var out = "
渲染结果:
块级辅助helper有很多特点,例如可以创建一个else部分.因为当你调用options.fn(context)时块级helper的内容已经被转码过,所以handlebars不会再去转码helper的内容。
handler 的路径Handlebars 支持简单的路径,就像 Mustache.
{{name}}
Handlebars 也支持嵌套的属性,比如对象的属性.
{{title}}
By {{author.name}}
{{body}}
模板工作的对象context:
var context = { title: "My First Blog Post!", author: { id: 47, name: "Yehuda Katz" }, body: "My first post. Wheeeee!" };
这使得使用handlebars模板处理JSON字符串成为可能。内嵌的handlebars的路径也包括../语法,相当于当前路径的父级。
Comments
这里例子中引用了相同的permalink即使他们在不同的块中。这种行为是新的,handlebars4支持。
Handlebars的内置块表达式(Block helper)
each block helper
你可以使用内置的{{#each}} helper遍历列表块内容,用this来引用遍历的元素 例如:
对应适用的json数据
{ name: ["html","css","javascript"] };
这里的this指的是数组里的每一项元素,和上面的Block很像,但原理是不一样的这里的name是数组,而内置的each就是为了遍历数组用的,更复杂的数据也同样适用。
if else block helper
{{#if}}就你使用JavaScript一样,你可以指定条件渲染DOM,如果它的参数返回false,undefined, null, "" 或者 [] (a "falsy" value), Handlebar将不会渲染DOM,如果存在{{#else}}则执行{{#else}}后面的渲染。
{{#if list}}
{{error}}
{{/if}}对应适用json数据
var data = {info:["HTML5","CSS3","WebGL"],"error":"数据取出错误"}
这里{{#if}}判断是否存在list数组,如果存在则遍历list,如果不存在输出错误信息
unless block helper
{{#unless}}这个语法是反向的if语法也就是当判断的值为false时他会渲染DOM 例如:
{{#unless data}}
{{error}}
{{/unless}}
with block helper
{{#with}}一般情况下,Handlebars模板会在编译的阶段的时候进行context传递和赋值。使用with的方法,我们可以将context转移到数据的一个section里面(如果你的数据包含section)。 这个方法在操作复杂的template时候非常有用。
{{title}}
{{#with author}}By {{firstName}} {{lastName}}
{{/with}}
对应适用json数据
{ title: "My first post!", author: { firstName: "Charles", lastName: "Jolley" } }Handlebar的注释(comments)
Handlebars也可以使用注释写法如下
{{! handlebars comments }}Handlebars的访问(Path)
Handlebar支持路径和mustache,Handlebar还支持嵌套的路径,使得能够查找嵌套低于当前上下文的属性
可以通过.来访问属性也可以使用../,来访问父级属性。 例如:(使用.访问的例子)
{{author.id}}
对应json数据
{ title: "My First Blog Post!", author: { id: 47, name: "Yehuda Katz" }, body: "My first post. Wheeeee!" };
例如:(使用../访问)
{{#with person}}{{../company.name}}
{{/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" });
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/114210.html
摘要:兼容语法,在大多数情况下它可以读取的语法并在你当前模板中使用。不要直接把它放在中否则的解析会改变模板内容。的路径支持简单的路径,就像也支持嵌套的属性,比如对象的属性模板工作的对象这使得使用模板处理字符串成为可能。这种行为是新的,支持。 介绍 Handlebars 让你能够有能力高效地容易地创立语义化的模版。Handlebars兼容Mustache语法,在大多数情况下它可以读取Musta...
摘要:前些天偷台风的闲暇时写了一个移动端音乐播放器,作为练手项目。有的歌词周杰伦算什么男人格式是时间点时间歌词创建映射首先以将歌词字符串分割成以时间点文字的数组,但由于这样分割之后最后一个元素是空的,所以用删除最后一个元素。 这段时间公司一直在做一个PC的教育类单页应用,庞大复杂,涉及非常多H5的知识,音频就是其中的一部分。前些天偷台风的闲暇时写了一个移动端音乐播放器,作为练手项目。 在线地...
阅读 3341·2021-11-22 13:53
阅读 3343·2021-10-11 11:11
阅读 915·2019-08-30 14:12
阅读 1196·2019-08-29 17:16
阅读 621·2019-08-29 16:45
阅读 3323·2019-08-29 12:56
阅读 649·2019-08-28 17:55
阅读 2047·2019-08-26 13:24
{{title}}