ECMAScript扩展 -3 【实战】带搜索功能的课程选项卡

一.模板的替换

<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();
            }
        },