handlebars+ AmazeUI图片轮播

项目中遇到handlebars+ AmazeUI图片轮播的方法，在此整理一下

一.知识准备

jq方法

1.find：

find() 方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选

2.each：

each() 方法规定为每个匹配元素规定运行的函数。
二.实例
引入：
<script src="assets/js/amazeui.min.js"></script>
<script src="assets/js/handlebars.min.js"></script>
<script src="assets/js/amazeui.widgets.helper.min.js"></script>
模板预加载，放在html结构里
<!-- 轮播图 -->
<script type="text/x-handlebars-template" id="amz-tpl">
  {{>slider slider}}
</script>
js函数
//获取轮播图信息
function getSlideList(){
   $.ajax({
        type: "GET",
        url: "https://d.bjyijiequ.com/qpi/rest/goodsSlideInfo/slideList",
        data:{"projectId":projectId,
             "version":version,
             "source":30,
             "sc":"wx",
             "rst":encodeURIComponent(navigator.userAgent),
             t:new Date().getTime()},  
        dataType : "xml",
        cache: false,
       error: function(xml)
       {
         alert("亲，网络似乎开小差了");
       },
        success:function callback(data){

           var arr=[] ;
            var arrIds=[];
            var arrUrl=[];
            var arrReateTypes=[];
            var arrslideInfoId=[];
            //按照分类，填充数组
            $(data).find("slide").each(function(){
                var picPath = $(this).find("picPath").text();
                var gmId = $(this).find("gmId").text();
                var slideInfoId = $(this).find("slideInfoId").text();
                var lbUrl = $(this).find("url").text();
                var Jfmallurl = "mallyjq/wx/index.htm";
                var FlbUrl = IsStrIndexOf(lbUrl,Jfmallurl);
                arr.push(picPath);
                arrIds.push(gmId);
                arrslideInfoId.push(slideInfoId);
                arrUrl.push(changeHref(FlbUrl));
                arrReateTypes.push($(this).find("relatetype").text());
            })
	//对模板进行填充
            var $tpl = $('#amz-tpl');
            var source = $tpl.text();
            var template = Handlebars.compile(source);
            var contentArr =[];
            if(arr.length>0){
               for(var i=0;i<arr.length;i++){
                   if(arrReateTypes[i]==9){//外部链接
                      contentArr.push({'img':getImagePath()+arr[i],'link':arrUrl[i]});
                   }else if(arrReateTypes[i]==7){//普通商品
                      contentArr.push({'img':getImagePath()+arr[i],'link':"home/recommendation/detail.html?goodsId="+arrIds[i]});
                   }else if(arrReateTypes[i]==8){//通知
                      contentArr.push({'img':getImagePath()+arr[i],'link':getBasePath()+"/property_GbSlideInfo_showDetailsClientPage.do?newsId="+arrIds[i]});
                   }else if(arrReateTypes[i]==3){//限时购
                      contentArr.push({'img':getImagePath()+arr[i],'link':"home/limit/detail.html?goodsId="+arrIds[i]});
                   }else if(arrReateTypes[i]==4){//团购
                      contentArr.push({'img':getImagePath()+arr[i],'link':"home/group/group-detail.html?goodsId="+arrIds[i]});
                   }
                }
            }else{
               contentArr.push({'img':'assets/images/homefrgnew_default.png','link':'#'});
            }
            var data = {
                    slider: {
                    "theme": "a1",
                    "content": contentArr,
                    "id":"my_slider"
                    },
                };
            var html = template(data);
            $tpl.after(html);
            $(".am-slides li img").css({"width":"100%","overflow":"hidden"});
            $(".am-slides").css({"height":document.body.clientWidth/5*2,"overflow":"hidden"});
            
            //轮播图设置暂停后继续轮播间隔，playAfterPaused的生效需初始化flexslider By:xiahao
            $('#my_slider').flexslider({
             playAfterPaused: 1000,
             directionNav:false,
             slideshowSpeed:2000,
             before: function(slider) {
               if (slider._pausedTimer) {
                 window.clearTimeout(slider._pausedTimer);
                 slider._pausedTimer = null;
               }
             },
             after: function(slider) {
               var pauseTime = slider.vars.playAfterPaused;
               if (pauseTime && !isNaN(pauseTime) && !slider.playing) {
                 if (!slider.manualPause && !slider.manualPlay && !slider.stopped) {
                   slider._pausedTimer = window.setTimeout(function() {
                     slider.play();
                   }, pauseTime);
                 }
               }
             }
             // 设置其他参数
           });
            //给轮播图添加埋点数据
            $('#my_slider').find("li").each(function(){
               var a = $(this).index();
               if(a>0){
                  var slideInfoId = arrslideInfoId[a-1];
                   if(!isStringNullOrEmpty(i)){
                      $(this).find("a").attr("onclick","buriedPointLogInfo('90','"+slideInfoId+"')");
                   }
               }
            });
            $.each(['slider', 'menu', 'gallery', 'footer', 'navbar'], function(i, m) {
               var module = $.AMUI[m];
               module && module.init && module.init();
            })
        }
   })
}