一.模板的替换
<script type="text/html" id="J_cardItemTpl">
<li class="card-item">
<a class="img-lk">
<img src="img/{{img}}" alt="">
</a>
<div class="item-status">
<span class="item-status-text">随到随学</span>
</div>
<h4 class="item-tt">
<a class="tt-lk" href="">{{courseName}}</a>
</h4>
<div class="item-line">
<span class="item-price {{isFree}}">{{price}}</span>
<span class="item-info">{{hours}}课时</span>
</div>
</li>
</script>
makeList: function(data){
var list = '';
data.myForEach(function(elem){
list += cardItemTpl.replace(/{{(.*?)}}/g,function(node,key){
return {
img: elem.img,
courseName: elem.course,
isFree: elem.is_free === '1' ? 'free' :'vip',
price: elem.is_free === '1' ? '免费' :("¥" + elem.price),
hours: elem.classes
}[key];
});
});
return list;
},
二.选项卡的实现
filterData: function(filed, data){
if(filed === 'all'){
return data;
}
return data.myFilter(function(elem){
switch(filed){
case 'free':
return elem.is_free === '1';
break;
case 'vip':
return elem.is_free === '0';
break;
default:
return true;
}
});
}
三.搜索的实现
searchCourse:function(){
var val = oSearInput.value,
len = val.length;
if(len > 0){
var data = this.searchData(courseData, val);
oCourseTabList.innerHTML = data && data.length > 0 ?
this.makeList(data):
this.showTip('没有搜索到相关课程');
}else{
this.restoreList();
}
},