说明:模板引擎主要针对于渲染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);
}

转载请注明出处(谢谢)

更多专业前端知识,请上 【猿2048】www.mk2048.com

关于模板引擎handlebars.js基本用法相关推荐

  1. Handlebars模板引擎中的each用法(type=“text/x-handlebars-template“)

    ** handlebar ** 概述与介绍 Handlebars 是 JavaScript 一个语义模板库,通过对view和data的分离来快速构建Web模板.它采用"Logic-less ...

  2. JavaScript模板引擎Template.js使用

    文章主要为大家详细介绍了JavaScript模板引擎Template.js使用方法.template.js 一款 JavaScript 模板引擎,简单,好用.提供一套模板语法,用户可以写一个模板区块, ...

  3. 前端模板引擎——handlebars

    目录 一.代码 二.页面显示 一.代码 <!DOCTYPE html> <html lang="en"><head><meta chars ...

  4. js模版引擎handlebars.js实用教程——结束语

    返回目录 有了这些功能,[ajax json Handlebars]替代[vo el表达式]不成问题,新时代的曙光已经来临,最佳解决方案在此,您还等什么? 教程到此结束...祝读者学习愉快... 转载 ...

  5. js模板引擎Template.js使用详解及免费下载template.js

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

  6. express应用中ajax结合模板引擎ejs.js渲染页面

    一.express应用中ajax结合模板引擎ejs.js渲染页面 在views新建一个渲染模板命名 Template.ejs Template.ejs 示例: <% if(coursesList ...

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

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

  8. Javascript模板引擎handlebars使用实例及技巧

    我们在开发的时候针对DOM操作,用简单的JS应用来说不成问题,但如果你对视图的每次更新都需要对我文档中非常大量的块进行操作呢?这时JS模版就派上用场了. 源地址:http://rfyiamcool.b ...

  9. Javascript模板引擎mustache.js详解

    进阶之路在于日积月累, 每天进步一点点-加油~ mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用. ...

最新文章

  1. Gentoo 安装日记 10 (配置内核 :General setup)
  2. (翻译)31天Windows Phone学习-1-项目模板
  3. R中统计假设检验总结(一)
  4. ppt护理文书流程图_护理文书书品管圈ppt
  5. R语言学习 - 热图美化 (数值标准化和调整坐标轴顺序)
  6. c#操作access,update语句不执行的解决办法
  7. Struts 2读书笔记-----使用Action的动态方法调用
  8. 家卫士扫地机器人好吗_扫地机器人哪个牌子好?市场最全智能扫地机器人品牌解析_扫地机器人...
  9. 一些牛人的IOS博客,mark下慢慢学习
  10. 国人常用密码TOP100 FROM THISITE
  11. python实现禁忌搜索算法
  12. 各种cms getshell技巧
  13. 素数----南阳OJ
  14. 写论文不会写摘要,演讲不会写开场白,不会写广告词,SCQA模型帮你搞定
  15. 深入理解SLAM中的Marginalization
  16. 为Windows Live Writer写一个简单的插件
  17. Windows下搭建PHP扩展开发环境
  18. vue-element-admin入坑之切换中文版
  19. 转载《利用Windows系统自带命令手工搞定病毒》_原水_新浪博客
  20. sdffdsfsdfdfssfsfsfsdfsdffds/sdfsDSFsd

热门文章

  1. oracle元字符,正则表达式元字符
  2. 网络层常见知识点剖析
  3. C++一天一个程序(四)
  4. 深入理解C指针第一章小结1
  5. VueJS组件之全局组件与局部组件
  6. 操作系统--用JavaScript实现银行家算法
  7. 【Android Developers Training】 81. 解析XML数据
  8. Java与JavaScript的通信
  9. Python 元组(Tuple)操作详解
  10. datetime建立索引有用吗_超全的数据库建表、SQL、索引规范