模版引擎Handlebars和Mustache
时间:2019-10-19
本文章向大家介绍模版引擎Handlebars和Mustache,主要包括模版引擎Handlebars和Mustache使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
Handlebars是一款很高效的模版引擎,提供语意化的模版语句,最大的兼容Mustache模版引擎, 提供最大的Mustache模版引擎兼容, 无需学习新语法即可使用;
下面这个是基本的模版表达式,
其中 {{ 和 }} 之间为handlerbars的变量;
<div class="entry"> <h1>{{title}}</h1> <div class="body"> {{body}} </div> </div>
拓展:Handlebars 的使用
其实就是模板化,这是以前就开始推崇的面向数据编程的一个方式。比如jquery template
web 开发中,js 解析JSON 是经常的事情。非常繁琐。handlebars 使用了模版,只要你定义一个模版,提供一个json对象,handlebars 就能吧json对象放到你定的模版中,非常方便好用! 下面直接上代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Handlebars demo</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="js/handlebars-1.0.0.beta.6.js"></script> <script type="text/javascript" src="js/myjs.js"></script> <style type="text/css"></style> </head> <body> <h2>Simple handlebars demo</h2> <button id="btn_simple">Click me</button> <div id="my_div"> </div> <h2>Handlebars Helpers demo</h2> <button id="btn_helper">Click me</button> <div id="helper_div"> </div> <script id="some-template" type="text/x-handlebars-template"> <table> <thead> <th>Username</th> <th>Real Name</th> <th>Email</th> </thead> <tbody> {{#if users}} <tr> <td>{{username}}</td> <td>{{firstName}} {{lastName}}</td> <td>{{email}}</td> </tr> {{else}} <tr> <td colspan="3">NO users!</td> </tr> {{/if}} </tbody> </table> </script> <script id="helper-template" type="text/x-handlebars-template"> <div> <h1>By {{fullName author}}</h1> <div>{{body}}</div> <h1>Comments</h1> {{#each comments}} <h2>By {{fullName author}}</h2> <div>{{body}}</h2> {{/each}} </div> </script> </body> </html>
$(document).ready(function(){ Handlebars.registerHelper('fullName', function(person) { return person.firstName + " " + person.lastName; }); $("#btn_simple").click(function(){ // $(this).hide(); showTemplate(); }); $("#btn_helper").click(function(){ showHowUseHelper(); }); }); // var context = {title: "My New Post", body: "This is my first post!"}; var persion = {title :"My New Post",body:"This is my first post!"} function showTemplate(){ var source = $("#some-template").html(); var template = Handlebars.compile(source); var data = { users: [ {username: "alan", firstName: "Alan", lastName: "Johnson", email: "alan@test.com" }, {username: "allison", firstName: "Allison", lastName: "House", email: "allison@test.com" }, {username: "ryan", firstName: "Ryan", lastName: "Carson", email: "ryan@test.com" } ]}; $("#my_div").html(template(data));; } function showHowUseHelper(){ var context = { author: {firstName: "Alan", lastName: "Johnson"}, body: "I Love Handlebars", comments: [{ author: {firstName: "Yehuda", lastName: "Katz"}, body: "Me too!" }] }; var source = $("#helper-template").html(); var template = Handlebars.compile(source); $("#helper_div").html(template(context));; }
.
原文地址:https://www.cnblogs.com/jianxian/p/11703390.html
- WordPress 中部署真正的懒加载(Lazy Load)
- 图形化的2008R2 Server Core 配置管理工具
- 各种浏览器的userAgent
- WordPress 根据浏览器 user-agent 按需加载CSS 文件
- memcached的最新状态
- [程序设计语言]-01:引言
- ASP.NET Ajax 库
- ASP.NET进程优化
- 多说 提速:js内页页脚加载、静态文件CDN
- 微信小程序的王者时代
- [程序设计语言]-[核心概念]-02:名字、作用域和约束(Bindings)
- NUMA架构
- 如何处理 Python 入门难以进步的现象?
- 编写前置和后置条件的连贯接口库:CuttingEdge.Conditions
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- linux内存使用情况分析(free + top)
- Centos7 python3安装
- crontab JAVA_HOME not found
- Centos7 源码安装mysql5.6
- mysql登录时报socket找不到终极解决方案
- Grafana将数据库由sqlite3改为mysql
- Python自学成才之路 带有参数的装饰器
- Grafana 将默认的元数据库 sqlite 改为 mysql
- 使用IDEA整合spring4+spring mvc+hibernate
- springmvc中@PathVariable和@RequestParam的区别
- centos7 安装mysql5.6
- bashdb安装及调试shell脚本
- linux awk指令详解
- linux sed指令详解
- Grafana使用zabbix自定义模板