直接上代码:

(定义模板)

(编译注入)

***知识点***

//数据必须为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. C++重写(override)、重载(overload)、重定义(redefine)以及虚函数调用

    一.基本概念 对于C++中经常出现的函数名称相同但是参数列表或者返回值不同的函数,主要存在三种情况: 1.函数重写(override) 函数重载主要实现了父类与子类之间的多态性,子类中定义与父类中名称 ...

  2. js(javascript) 继承的5种实现方式

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt240 js继承有5种实现方式:1.继承第一种方式:对象冒充  functio ...

  3. [js高手之路]Vue2.0基于vue-cli+webpack同级组件之间的通信教程

    我们接着上文继续,本文我们讲解兄弟组件的通信,项目结构还是跟上文一样. 在src/assets目录下建立文件EventHandler.js,该文件的作用在于给同级组件之间传递事件 EventHandl ...

  4. 最简单实用的JQuery实现banner图中的text打字动画效果!!!

    下面,就让小博详细介绍如何实现上面GIF实现的banner图中的文字动画效果,最简单实用的方法(鉴于代码量较小,就内嵌在一个HTML文件中了): 首先,我们要在header导入一个jQuery,并新建 ...

  5. JFrame常用属性设置模板

    最近在学习Swing,在各种demo中都需要构建JFrame,于是我决定把构建JFrame的代码贴上来,以后就直接复制粘贴了. public static void main(String[] arg ...

  6. ajax中后台string转json

    首先导入alibaba的fastJson包 后台: String thirdPage1=prop.getProperty("thirdPage1"); String thirdPa ...

  7. 第07周-集合与GUI

    1. 本周作业简评与建议 本周8分以上的同学有32人(占1/4),其中9分以上的同学有13人(占1/10).大作业未完成的最高评分一般高于6分.被认定为抄袭的为-10分.请大家认真完成大作业,后面每周 ...

  8. 201521123076《Java程序设计》第1周学习总结

    一. 本章学习总结 1.了解了JDK,JVM,JRE的相关内容 JVM(Java Virtual Machine): Java虚拟机,*.java原始码,经过编译程序翻译为.class位码.JVM正是 ...

  9. 201521123045java课程设计---定时器

    #课程设计--定时器(201521123045 郑子熙) 1.团队课程设计博客链接 http://www.cnblogs.com/chendajia/p/7065730.html 2.个人负责模块或任 ...

  10. 201521123026 《JAVA程序设计》第12周学习总结

    1. 本周学习总结 Q1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 Q1.将Student对象(属性:int id, String name,int age,d ...