说明:模板引擎主要针对于渲染DOM,取代了字符串拼接,用下面的代码亲测handlebars模板引擎比字符串拼接渲染DOM慢了20ms,

这里配置一个在线DEMO,简单说明下handlebars.js的基本用法,需要根据获取的数据去渲染,就会用到循环、判断

1、each,循环、可以嵌套

2、if,判断、可以嵌套

3、hepler,对于复杂的逻辑判断没法起作用,自己注册一个helper参与判断

handlebars.js官网

在线DEMO移动端

详细可以看上面DEMO里的main.js

/*
* @Author: wangjianfei
* @Date: 2017-05-16 16:10:25
* @Last Modified by: wangjianfei
* @Last Modified time: 2017-05-16 18:57:02
*/ 'use strict';
// AJAX
var xhrRequest=new XMLHttpRequest();
xhrRequest.open('GET','http://wjf444128852.github.io/json-datas/degula.json');
xhrRequest.onload=function(){
if(xhrRequest.status>=200&&xhrRequest.status<400){
var data=JSON.parse(xhrRequest.responseText);
// 1 定义用户列表
var users=data.data.users;
// 1.1 重新排列数据
sortData(users);
// 2 判断是否正在直播
var isLiving=data.data.my;
// console.log(data);
}else{
console.log('The server returned an error.');
}
}
xhrRequest.onerror=function(){
console.log('error!');
}
xhrRequest.send(); // 1 把人員按照積分从高到底排列
function sortData(lists){
for(var n=1;n<lists.length;n++){
for(var k=0;k<lists.length-1;k++){
var max=lists[k].score;
var nextCount=lists[k+1].score;
if(nextCount>max){
var preData=lists[k];
lists[k]=lists[k+1];
lists[k+1]=preData;
}
}
}
// 创建DOM,渲染data
createHTML(lists);
}
//1.3.01 注册一个Handlebars Helper:addOne,用来将索引+1,因为默认是从0开始的
Handlebars.registerHelper("addOne",function(index,options){
return parseInt(index)+1;
}); // 1.3.06 注册helper:compare,用来比较判断不同的显示内容
Handlebars.registerHelper("compare",function(temp,options){
if(temp==1){
//满足条件执行
return '<i class="promotion"></i>';
}else if(temp==0){
   //不满足执行{{else}}部分
return '<i class="nothing"></i>';
  }else if(temp==-1){
return '<i class="out"></i>';
}
}); // 1.3 创建DOM函数
function createHTML(userData){
console.log(userData);
var usersList=[
'{{#each this}}',
'<li>',
// 01 名词
'<b>',
// 使用注册的Helper
'{{addOne @index}}',
'.</b>',
// 02 头像
'<div class="main-img" data-direction={{stream_direction}} data-livekey={{live_key}} data-liveurl={{live_url}} data-nickname={{nickname}} data-pfid={{pfid}} data-liveid={{live_id}}>',
'<img src="{{headimg}}" alt="" />',
// 根据live_id是否正在直播
'{{#if live_id}}',
'<span></span>',
'{{/if}}',
'</div>',
// 03 用户名字
'<span>',
'{{nickname}}',
'</span>',
// 04 用户积分
'<b class="score">',
'{{score}}',
'</b>',
// 05 用户票数
'<b class="ticket">',
'{{count}}',
'</b>',
// 06 是否晋级、淘汰、败部
// 注册
'{{#compare promotion}}',
'{{/compare}}',
'</li>',
'{{/each}}'
].join('');
var usersHtml=Handlebars.compile(usersList)(userData);
var containerBox=document.getElementById('users-one');
// 追加到DOM树上
containerBox.innerHTML=usersHtml;
//
addEvent();
} //2 addEvent 绑定事件
function addEvent(){
// var allUsers=document.getElementsByClassName('main-img');
var allUsers=getDom('.main-img');
// console.log(allUsers);
for(var i=0,leng=allUsers.length;i<leng;i++){
var lists=allUsers[i];
lists.addEventListener("click",function(e){
event.preventDefault();
event.stopPropagation();
//
var pfid=this.getAttribute("data-pfid");
var nickname=this.getAttribute('data-nickname');
var liveid=this.getAttribute('data-liveid');
var liveurl=this.getAttribute('data-liveurl');
var livekey=this.getAttribute('data-livekey');
var direction=this.getAttribute('data-direction');
// console.log(liveid);
// handlebars.js 默认把值为null去除了,即把为null的替换为:'',所以此时不能用!=null判断了
// if(liveid!=null){
if(liveid){
// 进入直播间
// h5toRoom(pfid,nickname,liveid,liveurl,livekey,direction);
alert("进入直播间");
// 如果没在直播,进入个人主页
}else{
// h5toHomepage(pfid,nickname);
alert("进入个人主页");
}
// console.log(this);
});
}
} //3 getDom 获取DOM
function getDom(selector){
return document.querySelectorAll(selector);
}

转载请注明出处(谢谢)

关于模板引擎handlebars.js基本用法的更多相关文章

  1. JS模板引擎handlebars.js的简单使用

    handlebars.js的使用 首先我们要明白handlebars.js是干什么用的,我们知道使用jsp很麻烦, 于是我们开始使用freemarker等模板引擎,但这个只是针对服务器端来解 析的,那 ...

  2. 前端模板引擎doT.js的用法

    简介 一款简单好用的前端模板引擎 用法 <script type="text/javascript" src="js/doT.min.js">< ...

  3. JS 模板引擎 Handlebars.js 中文说明

    Handlebars 为你提供了一个可以毫无挫折感的高效率书写 语义化的模板 所必需的一切. Mustache 模板和 Handlebars 是兼容的,所以你可以把Mustache模板拿来导入到Han ...

  4. 前端JS模板引擎Mustache.js的用法

    Mustache.js在前端是一个非常强大的模板 Mustache用法参考

  5. Handlebars的基本用法 Handlebars.js使用介绍 http://handlebarsjs.com/ Handlebars.js 模板引擎 javascript/jquery模板引擎——Handlebars初体验 handlebars.js 入门(1) 作为一名前端的你,必须掌握的模板引擎:Handlebars 前端数据模板handlebars与jquery整

    Handlebars的基本用法 使用Handlebars,你可以轻松创建语义化模板,Mustache模板和Handlebars是兼容的,所以你可以将Mustache导入Handlebars以使用 Ha ...

  6. 模板引擎mustache.js

    Javascript模板引擎mustache.js详解   阅读目录 1. 从一个简单真实的需求讲起 2. mustache的用法 3. mustache的思想 4. {{prop}}标签 5. {{ ...

  7. js模版引擎handlebars.js实用教程

    js模版引擎handlebars.js实用教程 阅读本文需要了解基本的Handlebars.js概念,本文并不是Handlebars.js基础教程,而是注重于实际应用,为读者阐述使用过程中可能会遇到的 ...

  8. JavaScript模板引擎Template.js使用详解

    这篇文章主要为大家详细介绍了JavaScript模板引擎Template.js使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下   template.js 一款 JavaScript 模板引 ...

  9. 探究Javascript模板引擎mustache.js使用方法

    这篇文章主要为大家介绍了Javascript模板引擎mustache.js使用方法,mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后 ...

随机推荐

  1. Alpha冲刺 - (5/10)

    Part.1 开篇 队名:彳艮彳亍团队 组长博客:戳我进入 作业博客:班级博客本次作业的链接 Part.2 成员汇报 过去两天完成了哪些任务 基于ssm框架的前后端交互测试,结合微信小程序demo 展 ...

  2. Docker环境安装与配置

    Docker 简介 Docker使用Go语言编写的 安装Docker推荐LInux内核在3.10上 在2.6内核下运行较卡(CentOS 7.X以上内核是3.10) Docker 安装 安装yum-u ...

  3. Linux 防火墙相关

    1.SELinux 防火墙 1.1 查看SELinux状态: 1) /usr/sbin/sestatus -v      ##如果SELinux status参数为enabled即为开启状态 bamb ...

  4. ZZNU 2098 Drink coffee(差分+树状数组)

    题目链接:http://acm.hi-54.com/problem.php?pid=2098 2098 : Drink coffee 时间限制:1 Sec 内存限制:256 MiB 提交:32 答案正 ...

  5. 转---深入浅出妙用 Javascript 中 apply、call、bind

    作者:伯乐在线专栏作者 - chokcoco 如有好文章投稿,请点击 → 这里了解详情 如需转载,发送「转载」二字查看说明 这篇文章实在是很难下笔,因为网上相关文章不胜枚举. 巧合的是前些天看到阮老师 ...

  6. 转载 12步轻松搞定python装饰器

    作者: TypingQuietly 原文链接: https://www.jianshu.com/p/d68c6da1587a 呵呵!作为一名教python的老师,我发现学生们基本上一开始很难搞定pyt ...

  7. 当强制关机时,出现Eclipse打不开的问题

    关于Eclipse或MyEclipse启动卡死的问题(即Eclipse上一次没有正确关闭,导致启动的时候卡死错误解决方法):      方案1:(推荐使用,如果没有这个文件,就使用方案2,方案2基本上 ...

  8. Appium+Python 自动化-appium常用元素定位方法

    https://www.cnblogs.com/rabbit-testing/p/8042733.html 大牛 https://blog.csdn.net/kaka1121/article/deta ...

  9. Docz 用 MDX 写 React UI 组件文档

    Docz 用 MDX 写 React UI 组件文档 前言 为了提升开发效率,创建一套 UI 组件库是一种较为有效的方式之一:可以减少重复工作.提高可复用,所以现在越来越多团队开始创建自己的 UI 组 ...

  10. Docker导入、导出、删除容器

    1.导出某个容器导出某个容器,非常简单,使用docker export命令,语法:docker export $container_id > 容器快照名导出后在本地可以看到有一个centos.t ...