Handlebars模板引擎demo
来源:互联网 发布:阿里云鹰眼 编辑:程序博客网 时间:2024/06/05 08:56
介绍
Handlebars 是 JavaScript 一个语义模板库,通过对view和data的分离来快速构建Web模板。它采用”Logic-less template”(无逻辑模版)的思路,在加载时被预编译,而不是到了客户端执行到代码时再去编译, 这样可以保证模板加载和运行的速度。Handlebars兼容Mustache,你可以在Handlebars中导入Mustache模板。
以下是我学习Handlebars的第一个demo。页面引入handlebars.js和jquery.js。
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>黄宝康的第一个Handlebars案例</title> <script src="handlebars.js"></script> <script src="jquery.js"></script></head><body><script id="tpl" type="text/x-handlebars-template"> <div class="demo"> <h1>{{name}}</h1> <p>{{content}}</p> </div></script><script> var source = $("#tpl").html();// 得到模板原始内容 var template = Handlebars.compile(source);//编译之后返回类型为Function var json = {name:'黄宝康',content:'我的第一个Handlebars模板引擎demo'};//模拟数据 var html = template(json);// 函数调用之后返回填充后的数据 $('body').html(html);</script></body></html>
页面效果:
阅读全文
0 0
- Handlebars模板引擎demo
- Handlebars.js 模板引擎
- 模板引擎 Handlebars.js
- handlebars模板引擎
- Handlebars模板引擎
- Handlebars.js 模板引擎
- Handlebars.js 模板引擎
- handlebars模板引擎
- JavaScript模板引擎初探 - HandleBars
- 关于handlebars.js模板引擎
- HandleBars模板引擎中文文档---Handlebars.js 表达式
- JS模板引擎---mustache与HandleBars
- 在Express中使用Handlebars模板引擎
- Handlebars模板引擎介绍和开发指南
- 关于模板引擎handlebars.js基本用法
- 第7章 Handlebars模板引擎
- Handlebars模板引擎中的each嵌套及源码浅读
- Handlebars模板引擎中的each嵌套及源码浅读
- Redis中删除过期Key的三种策略
- canal
- 洛谷P2951 [USACO09OPEN]捉迷藏Hide and Seek
- Oracle存储过程学习
- Zookeeper JAVA客户端(Kotlin 实现) CRUD
- Handlebars模板引擎demo
- Matlab trapz函数和cumtrapz函数
- npm 安装包报错 rollbackFailedOptional
- 一个关于php将资源提供进行下载的操作类
- Centos7+django1.11+ngnix+uwsgi+python3.6项目部署
- (1)VS2017 Xamarin.Android 部署
- SVN集成LDAP认证及自助权限申请系统搭建
- 数据结构-分类
- Spring Cloud构建微服务架构:服务容错保护(Hystrix断路器)【Dalston版】