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

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

转载请注明出处(谢谢)