handlebars.js模版引擎随记

前台的模版引擎有许多种,相比较而言 我个人更觉得handlebars更为轻便

首先github上下载自新版本的handelbars.js http://handlebarsjs.com

下载下来之后呢 我们需要在页面引入js

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

引入之后我们需要在html中定义数据占位 在handlebars中最基本的就是使用 {{ }} 包裹 例如{{value}} handlebars模块会自动匹配相对应的值,对象或者函数

1 <div class="demo">
2     <h1>{{name}}</h1>
3     <p>{{content}}</p>
4 </div>

你也可以单独的制作一个模版,用id或者class来确定唯一性,type是固定的 不可缺少

1 <script id="tpl" type="text/x-handlebars-template">
2     <div class="demo">
3             <h1>{{title}}</h1>
4             <p>{{content.title}}</p>
5     </div>
6 </script>

在js中使用handlebars.compile()来预编译模版

1 //用jquery获取模板
2 var tpl  =  $("#tpl").html();
3 var template = Handlebars.compile(tpl);
4 //模拟json数据
5 var context = { name: "zhaoshuai", content: "learn Handlebars"};
6 //匹配json内容
7 var html = template(context);

一般我们使用模版引擎最主要还是解决数据的遍历问题 所以 handlebars里面有内置的表达式 each 我们可以利用 {{#each name}}来遍历列表块的内容,用this来引用遍历的元素, name是数组

1 <ul>
2       {{#each name}}
3         <li>{{this}}</li>
4       {{/each}}
5 </ul>

对应json是:

1 {
2   name: ["html","css","javascript"]
3 };

编译后:

1 <ul>
2   <li>JavaScript</li>
3   <li>HTML</li>
4   <li>CSS</li>
5 </ul>

在最后必须要提的是 引入的时候一定要放在 jquery的后面 不然handlebars里面有的方法会报错的

再补一点 模版内的 注释

写法如下:

1 {{! handlebars comments }}

最后贴上一张 写好的代码

原文地址:https://www.cnblogs.com/we-jack/p/8432486.html

时间: 2024-10-12 19:52:33

handlebars.js模版引擎随记的相关文章

js模版引擎handlebars.js实用教程

一.为什么选择Handlebars.js 据小菜了解,对于java开发,涉及到页面展示时,比较主流的有两种解决方案: 1. struts2+vo+el表达式. 这种方式,重点不在于struts2,而是vo和el表达式,其基本思想是:根据页面需要的信息,构造出一个实体,这个实体中包含了界面需要的所有属性,通常这个实体是由N个表中的字段构成的,俗称vo.由于vo的属性可以是String.List.Map等等等,又可以vo套vo,因此这种方式非常灵活,也非常好用. 在后台对vo进行赋值,通过strut

js模版引擎开发实战以及对eval函数的改进

简介 前段时间,想着自己写一个简单的模版引擎,便于自己平时开发demo时使用,同时也算是之前学习的知识的一种总结吧! 首先我们先了解一下模版引擎的工作原理吧! 1. 模版引擎其实就是将指定标签的内容根据固定规则,解析为可执行语句字符串: 2. 执行可执行解析后的语句字符串,即生成我们想要的页面结构. 具体实现方法: 1. 最终效果 1 /* 解析前 2 <ul> 3 {{for(var i = 0; i < data.todos.length; ++i)}} 4 {{if(data.to

js模版引擎—nodetpl

这个是公司内部使用的一个模版引擎,主要应用在pc. 根据模版,返回一个js文件.大概是这个样子的js. (function(N, undefined){ var PATH = 'http://core.pc.lietou-static.com/tpls/common/plugins/localdata/city.js'; if(!N || !N._tpls) return false; N._tpls[PATH] = N._tpls[PATH] ||{......}; })(window.Nod

使用localstorage及js模版引擎 开发 m站设想

目前 m站开发的方式,依然请求完整的html,这样造成的问题就是每次请求的数据量过大过多,在没有wifi的情况下,导致页面打开的速度很慢,耗费的流量也较多:访问m站的多是移动端设备,其浏览器的版本都较高,所以其html5属性localstorage支持性也较好,并且m站页面较为简单,结构性较好,如果使用localstorage+js解析模版+json数据的方式来实现m的结构,其访问速度应该会大幅度提升. 具体实现方式如下: 1.把页面的html节点存储在localstorage中,因为m站结构简

&lt;script id=&quot;nav_template&quot; type=&quot;text/x-handlebars-template&quot;&gt; JS的模板引擎 Handlebars.js 模板引擎

http://www.ghostchina.com/introducing-the-handlebars-js-templating-engine/

Handlebars.js 模板引擎

http://www.ghostchina.com/introducing-the-handlebars-js-templating-engine/ 这个好用是好用,可以不走control去拼装一大堆数据,模型,在页面使用的时候,按需加载不同的模块. 但是这需要请求的api,或者control提供的json数据与页面紧密集合,不利于方法的继承,重载.违背了分离的原则.

js模板引擎之 Handlebars 基本用法

模板引擎比较久远的一个技术,常见的模板引擎有 baiduTemplate(百度)\artTemplate(腾讯)\juicer(淘宝)\doT\ tmpl\ handlebars\ easyTemplate\ underscoretemplate \ mustache \kissytemplate 等等 本篇简单介绍一下Handlebars相关常用例子: Handlebars依赖jq,也可以写不依赖的jq的方式.本教程依赖. Handlebars官方网站:http://handlebarsjs.

为什么要使用JS模板引擎

我之前在写一个输入联想控件的时候,改过好几个版本,每个版本不是因为性能不好就是因为代码凌乱而被推翻,最后用了understore模板引擎,效果有明显改善.整好这两天在研究互联网技术架构,发现很多的开发框架前端都是使用js模板引擎,感悟真的是大道至简,殊途同归啊,哈哈. 关于为什么使用js模板引擎,在博客园发现园友的一片文章<js模版引擎handlebars.js实用教程——为什么选择Handlebars.js>,该文已经做了详细解答.下面内容转自该文: 据小菜了解,对于java开发,涉及到页面

为什么选择Handlebars.js

据了解,对于java开发,涉及到页面展示时,比较主流的有两种解决方案: 1. struts2+vo+el表达式. 这种方式,重点不在于struts2,而是vo和el表达式,其基本思想是:根据页面需要的信息,构造出一个实体,这个实体中包含了界面需要的所有属性,通常这个实体是由N个表中的字段构成的,俗称vo.由于vo的属性可以是String.List.Map等等等,又可以vo套vo,因此这种方式非常灵活,也非常好用. 在后台对vo进行赋值,通过struts2封装到request中,然后在界面用el表