直接上代码:

(定义模板)

(编译注入)

***知识点***

//数据必须为Json数据(强调:jsonp数据不行,和json是两种数据,jsonp多了callback回调函数来包裹json数据)

遍历模板写法:

(1){{# test}}  {{/ test}}

(2){{each test}}  {{/each}}

(3){{#if test}} //if test不为空,模板渲染

     (模板渲染的区域)

       {{else}} //else   test为空,模板渲染

     (模板渲染的区域)

   {{/if}}

(4){{{ Content }}} 三个括号可以解析带html标签的数据

例如:Content=<img src=“url“ alt=“”/>

{{{Content}}} 解析出来的是一张图片

  

  

handlebar JS模板使用笔记的更多相关文章

  1. handlebar.js模板引擎(轻页面小工程可用)

    介绍 Handlebars 让你能够有能力高效地容易地创立语义化的模版.Handlebars兼容Mustache语法,在大多数情况下它可以读取Mustache的语法并在你当前模板中使用.具体点击这里 ...

  2. handlebar.js使用

    官方网站:http://handlebarsjs.com/ 下载及查看使用帮助,或者用百度cdn引用 一.定义模板 <script id="entry-template" t ...

  3. laytpl js模板引擎

    laytpl js模板引擎.laytpl是一款非常轻量的JavaScript模板引擎.地址:http://www.layui.com/laytpl/ 用法与handlebar.js类似,但是比较轻量级 ...

  4. doT js 模板引擎【初探】要优雅不要污

    js中拼接html,总是感觉不够优雅,本着要优雅不要污,决定尝试js模板引擎. JavaScript 模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注. ...

  5. 各种JS模板引擎对比数据(高性能JavaScript模板引擎)

    最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据:通过测试artTemplate.juicer与doT引擎模板整体性能要有绝对优势: js模板引擎 Ja ...

  6. 《Ext JS模板与组件基本知识框架图----模板》

    最近在整理Ext JS的模板和组件,在参考<Ext JS权威指南>,<Ext JS Web应用程序开发指南>,<Ext JS API>等相关书籍后才写下这篇< ...

  7. JS 模板引擎 BaiduTemplate 和 ArtTemplate 对比及应用

    最近做项目用了JS模板引擎渲染HTML,JS模板引擎是在去年做项目是了解到的,但一直没有用,只停留在了解层面,直到这次做项目才用到,JS模板引擎用了两个 BaiduTemplate 和 ArtTemp ...

  8. JS SDK 随手笔记

    JS SDK 随手笔记 窗口模块 Frame/Multi Frame 对话框 页面间的通讯 生命周期 窗口层叠 窗口模块 窗口模块是是AppCan移动应用界面最基本的单位.窗口是每个界面布局的基础,他 ...

  9. 掌握js模板引擎

    最近要做一个小项目,不管是使用angularjs还是reactjs,都觉得大材小用了.其实我可能只需要引入一个jquery,但想到jquery对dom的操作,对于早已习惯了双向绑定模式的我,何尝不是一 ...

随机推荐

  1. [js高手之路]node js系列课程-图解express+supervisor+ejs用法

    上文通过node js自带的http模块搭建了一个简易的服务器,实际在开发中,一般用的是express框架,本文我们就来讲讲项目开发中必备不可少的几样东西: 服务器( express ) 路由( ex ...

  2. Keil提示premature end of file错误 无法生成HEX文件

    今天舍友在使用Keil UV4的时候遇到一个问题:Keil提示premature end of file,无法生成hex文件. 代码是没有错误的.那么问题就出在设置上面了. 百度了一圈,发现很少人解答 ...

  3. MYSQL 中 LIMIT 用法

    mapper文件中的sql: ------------------------------------------------------------------------------------- ...

  4. 10个经典的Java面试题集合(转载)

    1.Java的HashMap是如何工作的? HashMap是一个针对数据结构的键值,每个键都会有相应的值,关键是识别这样的值. HashMap 基于 hashing 原理,我们通过 put ()和 g ...

  5. PHP初入,div知识点整理(特效&字体等元素的使用整理)

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  6. eclipse+git

    最近朋友都推荐使用github管理自己的项目,而且免费用户可以有5个仓库,恰好我也想了解下git,借此机会学习一下.github官方指南使用独立第三方git工具来进行版本控制,并不借助于eclipse ...

  7. 电商Banner设计背后的12个人性的秘密

  8. 自制裸眼3D图【推荐】

    Welcome to the World of Hidden 3D Stereograms.欢迎进入隐身3D图的世界! 网址:http://hidden-3d.com 裸眼立体图是什么? 立体图是立体 ...

  9. 团队作业4——第一次项目冲刺(Alpha版本)第一天+第二天+第三天+第四天+第五天+第六天+第七天

    冲刺第一天 一.Daily Scrum Meeting照片 二.每个人的工作 1.今天计划完成的任务 GUI.计时功能.题目生成 2.工作中遇到的困难 刚开始在计时功能模块只能做到秒位,经过查询资料后 ...

  10. SNS团队Beta阶段第六次站立会议(2017.5.27)

    1.立会照片 2.每个人的工作 成员 今天已完成的工作 明天计划完成的工作 罗于婕 发音图标的改进 对界面各部分的图标进行完善.美化 龚晓婷 对于历史记录功能的测试 对于历史记录功能进一步完善 林仕庄 ...