4-11handlebars模板的使用

1.nav-side/index.js

 

'use strict';

require('./index.css');

var _mm = require('util/mm.js');

//渲染模板数据

var templateIndex = require('./index.string');

 

// 通用页面头部

var navSide = {

option : {

name :'',

navList : [

{name : 'user-center',desc : '个人中心',href : './user-center.html'},

{name : 'oder-list', desc : '我的订单',href : './oder-list.html'},

{name : 'pass-update',desc : '修改密码',href : './pass-update.html'},

{name : 'about', desc : '关于mmall',href : './about.html'}

]

},

init : function(option){

//对传入的option合并默认option

$.extend(this.option,option);

this.renderNav();

},

//渲染导航菜单

renderNav : function(){

//计算active数据

for(var i= 0,iLength = this.option.navList.length; i<iLength; i++){

//判断navList[i]的name(user-center等)和option.name（空的点击时传入的name）的值是否相等。

对应渲染时index.string中的{{#isActive}}<li class="nav-item active{{/isActive}}

if(this.option.navList[i].name === this.option.name){

this.option.navList[i].isActive = true;

}

}

//渲染list数据

var navHtml = _mm.renderHtml(templateIndex,{

navList : this.option.navList

});

//把html放入容器

$('.nav-side').html(navHtml);

}

};

 

module.exports = navSide;

 

 

 

2.nav-side/index.html

<ul class="nav-side">

</ul>

 

3.nav-side/index.string模板

{{#navList}}

{{#isActive}}

<li class="nav-item active">

{{/isActive}}

{{^isActive}}

<li class="nav-item">

{{/isActive}}

<a href="{{href}}" class="link">{{desc}}</a>

</li>

 

{{/navList}}

 

模板

{{#isActive}}

<li class="nav-item active">

{{/isActive}}

是对于有active的处理

模板

{{#isActive}}

<li class="nav-item">

{{/isActive}}

是对于没有active的渲染处理

 

4.nav-side/index.js中渲染

1）//渲染list数据

var navHtml = _mm.renderHtml(templateIndex,{

navList : this.option.navList

});

//把html放入容器

$('.nav-list').html(navHtml);

2）//渲染模板数据

var templateIndex = require('./index.string');

 

5.webpack.config.js中设置好loader加载器

{ test: /\.string$/, loader:'html-loader'}

 

6.module.exports = navSide;虽然输出了，但是index/index.js中并没有调用

 

var navSide = require('page/nav-side/index.js');

//传值测试

navSide.init({

name:'user-center'

});

​​

 

转载于:https://my.oschina.net/astros/blog/1925721