直接上代码:

(定义模板)

(编译注入)

***知识点***

//数据必须为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. 【JCP模式实战--ferrous-framework】ferrous前端开发框架邀您初体验

    一.简介 ferrous-framework是为了迎合微服务架构而封装的纯前端开发框架. 实现了一种介于单页面和多页面的开发模式,让大家根据自己的需要对单页面和多页面进行切换或者共存. 页面结构采用J ...

  2. 分布式定时任务 -- elastic-job

    一.前言 在我们的项目当中,使用定时任务是避免不了的,我们在部署定时任务时,通常只部署一台机器.部署多台机器时,同一个任务会执行多次.比如短信提醒,每天定时的给用户下发短信,如果部署了多台,同一个用户 ...

  3. 使用CXF开发JAX-RS类型的WebService

    1.JAXRSServerFactoryBean编程方式 访问方式:http://localhost:8080/cxf_spring_rest_server/ws/rest/student/query ...

  4. 比较两个date返回日期相差天数

    public static int daydiff(Date fDate, Date oDate) { Calendar aCalendar = Calendar.getInstance(); aCa ...

  5. hdu 3549最大流Ford-Fulkerson算法

    Ford-Fulkerson算法 戳戳http://www.cnblogs.com/luweiseu/archive/2012/07/14/2591573.html Ford-Fulkerson方法依 ...

  6. test文件伪装

    该文件属于伪装图片类型.图片另存后把后缀改为rar将看到txt文件. 利用了 cmd cp  /b  命令 命令格式:copy /b 文件1+文件2+......文件N 合并后的文件名<br&g ...

  7. HTML解析原理概括(转载)

    HTML解析原理 标准的web前端工程师需要知道 ◎浏览器(或者相应播放器)的渲染/重绘原理  这我得加把劲了.我还真的说的不是很清楚,我就G下,结果不是很多,找到了有一个,就记下来了... 以下部分 ...

  8. Rsync for windows

    说到电脑,我真是一屋子都是. 从房间到大厅,就已经有5台.这还没包括服务器. 虽然这5台电脑我最常用的也只是2~3台.其他的不是给朋友们来坐的时候打打游戏.就是给妈妈上网看看报纸. 不过我相信很多朋友 ...

  9. 【Socket编程】通过Socket实现TCP编程

    通过Socket实现TCP编程 Socket通信 : 1.TCP协议是面向对象连接.可靠的.有序的,以字节流的方式发送数据. 2.基于TCP协议实现网络通信的类: 客户端----Socket类 服务器 ...

  10. 201521123049 《JAVA程序设计》 第6周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...