【视频列表页面】利用模板引擎动态渲染数据

摘要：项目需求自适应页面，兼容安卓，和。要求页面显示视频列表，点击列表中的图片和标题就可以播放视频，视频列表每页条，能翻页。本项目由于是需要大量的数据渲染以及后期的数据填充，所以决定使用模板引擎。同时使用了作为部分框架。使用作为视频弹窗。

项目需求:自适应页面，兼容安卓，IOS和PC。要求页面显示视频列表，点击列表中的图片和标题就可以播放视频，视频列表每页5条，能翻页。

本项目由于是需要大量的数据渲染以及后期的数据填充，所以决定使用模板引擎。
同时使用了boostrap作为部分UI框架。
使用Layer作为视频弹窗。

模板引擎结构如下：

该模板引擎很好的保证了页面原结构，即使我这样的初学者也可以使用它。
注意它的官方如下：art-template官方文档

标准语法：

`{{value}}
{{data.key}}
{{data["key"]}}
{{a ? b : c}}
{{a || b}}
{{a + b}}`

原始语法：

<%= value %>
<%= data.key %>
<%= data["key"] %>
<%= a ? b : c %>
<%= a || b %>
<%= a + b %>

直接按照原来的结构然后按照模板的语法进行修改就是了。

window.onload = function() {
    var data;
    $.ajax({
        dataType: "json",
        url: "data.json",
        data: data,
        type: "get",
        success: function(data, key) {
            //转化为js对象
            var jsArr = data;
            //遍历JSON对象，将JSON对象转化为数组
            for(var key in jsArr) {};
            //点击国家按钮显示指定内容
            $("body").on("click", ".country>li", function(e) {
                $(this).addClass("active").siblings().removeClass("active");
                //获取当前tab中鼠标停在的table栏的索引  
                var index = $(this).index();
                //根据这个索引切换，下面的展示  
                $("li").eq(index).addClass("selected").siblings().removeClass("selected");
                //获取当前点击项目的ID
                var indexId = $(this).attr("id");
                //新建数组，将当前点击项的id赋值给当前要显示的数组作为KEY值，就获取的当前显示项的数据
                var jsArri = jsArr[this.id];
                if(jsArri === undefined || jsArri.length == 0) {
                    $(".medialist").html("");
                    $("#page").hide();
                } else {
                    $("#page").show();
                }
                // 分页
                $("#page").html("");
                var pageData = jsArri.length;
                $(function() {
                    var count = pageData; //设置总条数
                    var pageSize = 5; //每页显示的条数
                    var pageCount = Math.ceil(count / pageSize); //能显示几页
                    var currentPage = 1; //默认显示第一页
                    //做个分页按钮
                    for(var i = 1; i <= pageCount; i++) {
                        var pageN = "" + i + ""
                        $("#page").append(pageN);
                    }
                    //默认显示第一页
                    $(".medialist").html("");
                    for(i = (currentPage - 1) * pageSize; i < pageSize * currentPage; i++) {
                        var obj = {
                            items: jsArri[i]
                        };
                        var result = template("template", obj);
                        $(".medialist").append(result);
                        $("#page span:first-child").addClass("choosed")
                    };
                    //显示选择页的内容  
                    $(".pageName").click(function() {
                        var selectPage = $(this).attr("selectPage");
                        $("#page").children("span").removeClass("choosed");
                        $("#page").children("span").eq(selectPage - 1).addClass("choosed");
                        $(".medialist").html("");
                        //  判断是否是最后一页
                        if(selectPage == pageCount) {
                            for(i = (selectPage - 1) * pageSize; i < pageData; i++) {
                                var obj = {
                                    items: jsArri[i]
                                };
                                var result = template("template", obj);
                                $(".medialist").append(result);
                            }
                        } else {
                            for(i = (selectPage - 1) * pageSize; i < pageSize * selectPage; i++) {
                                var obj = {
                                    items: jsArri[i]
                                };
                                console.log(obj);
                                var result = template("template", obj);
                                console.log(result);
                                $(".medialist").append(result);
                            }
                        }
                    });
                })
                //点击预览图显示弹窗
                $(".reload,.title").on("click", function() {
                    //取得当前点击的预览图的下标
                    var indexB = $(this).parent().parent().parent().index();
                    //将预览图的下标作为当前显示的国家数据的中的urlpc值
                    var urlpc = jsArri[indexB].urlpc;
                    var title = jsArri[indexB].title;
                    if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)) {
                        //Layer弹窗开始
                        layer.open({
                            type: 2,
                            title: title,
                            area: ["320px", "240px"],
                            shade: 0.6,
                            closeBtn: 0,
                            shadeClose: true,
                            content: urlpc,
                        });
                    } else {
                        //Layer弹窗开始
                        layer.open({
                            type: 2,
                            title: title,
                            area: ["640px", "360px"],
                            shade: 0.6,
                            closeBtn: 0,
                            shadeClose: true,
                            content: urlpc,
                        });
                        layer.msg("点击任意处可关闭", function() {
                            time: 500
                        })
                        //Layer弹窗结束
                    }
                });
            });
            //加载第一项美国
            $("#Americia").trigger("click");
        }
    })

JS是重点项目，在这里遇到了很多问题。

1.需要PHP对JSON进行转换【注意：这段方法可以用js代替，所以可把这段php文件删除】
代码就这一行：

还需要注意，使用PHP必须要开虚拟机，因为php是后台语言。否则浏览器会报json格式错误。
这里的file_get_contents()方法只是获取数据，加上echo是输出的意思。

2.然后再AJAX中，就可以直接引入php文件：【注意：这段方法可以用js代替】

url: "artTemp.php",

一般用get方式

type: "get",

Get是向服务器发索取数据的一种请求，而Post是向服务器提交数据的一种请求.通常我们请求数据用get,保存密码用post.

数据请求成功后对数据进行处理：

success：function()
{ ...... }

【1、2中用JS代替的方法】
这里如果要用PHP的话，需要用到虚拟机，以及对php有基本的了解；其实可以用jquery来代替，让ajax直接获取data.json:

                        var data;
                        $.ajax({
                            dataType:"json",
                            url:"data.json",
                            data:data,
                            type: "get",
                            success: function(data, key) {
                                //转化为js对象
                                var jsArr = data;
                                

这里要注意首先需要在ajax之前var 一个data变量，然后再ajax获取到data.json后将值传入data变量：

data:data,

同时，在success中的：var jsArr =JSON.parse(data)就可以直接换成var jsArr = data。因为
JSON.parse() 方法用来解析JSON字符串，构造由字符串描述的JavaScript值或对象。
在这里还需设置dataType:json;因为在jquery文档中有这么一句：

这样就不需要在用JSON.parse()方法了。关于这一点，这篇文章有说明：
How to Use JSON Data with PHP or JavaScript

这里马上说的JSON.parse就可以不用了↓↓↓↓

3.将data数据转化为JSON对象

使用JSON.parse()方法：

var jsArr = JSON.parse(data);

4.将JSON对象转化为数组
然后再遍历JSON对象，将JSON转化为数组：

for(var key in jsArr) {
            console.log(jsArr[key])
            };

5.点击国家按钮显示对应内容
然后是点击事件，点击指定的国家显示相应的视频内容列表：

//此处使用的是事件委托，将li的点击委托给body.

$("body").on("click", ".country>li", function(e) {

//给当前点击项添加active样式，先给自己添加样式，再干掉其他人的样式。

    $(this).addClass("active").siblings().removeClass("active");

//获取当前tab中鼠标停在的table栏的索引

    var index = $(this).index();

//根据这个索引切换，下面的展示 $("li").eq(index).addClass("selected").siblings().removeClass("selected");

//获取当前点击项目的ID

    var indexId = $(this).attr("id");

//【重要】新建数组，将当前点击项的id赋值给当前要显示的数组作为KEY值，就获取的当前显示项的数据

    console.log(jsArr[this.id])
    var jsArri = jsArr[this.id];

//此处由于json中的数据不完整，还导致我看错了，一直点击没有数据的按钮，然后提示undefind....

接下俩还需要根据请求到的数据，如果 数据为空，就显示提示图片：没有内容；如果有数据，显示内容。
判断：

if(jsArri === undefined || jsArri.length == 0) {
                    $(".medialist").html("");
                    $("#page").hide();
                } else {
                    $("#page").show();
                }

然后是对内容进行分页显示
此处稍微复杂，我用的是自己编写的分页工具，应为各种插件和需求不相符。

                首先对分页工具进行清空 
                $("#page").html("");
                设置变量pagedata，将当前请求到的国家内的 数据长度赋值给它，就求到了请求到的数据有几条
                var pageData = jsArri.length;
                进行分页：
                $(function() {
                    var count = pageData; //设置总条数
                    var pageSize = 5; //每页显示的条数
                    var pageCount = Math.ceil(count / pageSize); //能显示几页
                    var currentPage = 1; //默认显示第一页
                    //做个分页按钮
                    for(var i = 1; i <= pageCount; i++) {
                        var pageN = "" + i + ""
                        $("#page").append(pageN);
                        这样就显示出基本的分页列表了。
                    }
                    //默认显示第一页
                    清空视频列表
                    $(".medialist").html("");
                    由于数据index从0开始算，所以要用i=当前显示的数字-1.
                    for(i = (currentPage - 1) * pageSize; i < pageSize * currentPage; i++) {
                        var obj = {
                            items: jsArri[i]
                        };
                        在循环中渲染模板引擎
                        var result = template("template", obj);
                        $(".medialist").append(result);
                        给第一页分页添加样式
                        $("#page span:first-child").addClass("choosed")
                    };
                    
                    //显示选择页的内容  
                    $(".pageName").click(function() {
                        选取到当前被点击的分页数字
                        var selectPage = $(this).attr("selectPage");
                        给其他分页数字去掉选中样式
                        $("#page").children("span").removeClass("choosed");
                        给当前选中的分页数字添加样式
                        $("#page").children("span").eq(selectPage - 1).addClass("choosed");
                        清空
                        $(".medialist").html("");
                        //  判断是否是最后一页
                        如果是最后一页，只需要渲染最后几条数据：
                        if(selectPage == pageCount) {
                            for(i = (selectPage - 1) * pageSize; i < pageData; i++) {
                                var obj = {
                                    items: jsArri[i]
                                };
                                var result = template("template", obj);
                                $(".medialist").append(result);
                            }
                        } else {
                        //如果不是最后一页，就是中间的页面，就直接计算出是那几条数据进行渲染。
                            for(i = (selectPage - 1) * pageSize; i < pageSize * selectPage; i++) {
                                var obj = {
                                    items: jsArri[i]
                                };
                                console.log(obj);
                                var result = template("template", obj);
                                console.log(result);
                                $(".medialist").append(result);
                            }
                        }
                    });
                })

至此，已经完显示了json中的数据。

还有一点，由于渲染数据是由点击上面的按钮实现的，所以在页面加载后默认的第一项美国是不显示的，所以需要美国的内容显示，就要在页面加载完毕后模拟点击事件，此处使用trigger()方法：

$("#Americia").trigger("click");

这样就可以页面加载后第一页显示默认的国家栏目的数据啦，如果想第一页显示其他国家的数据，直接替换ID即可。

接下来的部分会演示如何利用Layer插件播放视频。

4.点击视频预览图播放视频
首先当然是要给预览图的标签注册点击事件：
这里可以用事件委托

$(".title").on("click", function()  { ...... }

然后再在点击事件中获取当前点击项的index：

var indexB = $(".item").find("img").index($(this));

也可以这么写：

var indexB = $(this).parent().parent().index()

这个更容易理解，找当前被点击元素的父元素的父元素，再取他的index，因为每个父元素都有唯一一个img，所以就得到了index！

5.实现点击图片和标题均可播放视频：

要想实现点击图片和标题都可以播放视频，那么必须给他们绑定同一个事件。

jquery为多个选择器绑定同一个事件方法：

("#start,#end").on("click",function(){
　　　　alert("The paragraph was clicked.");

            });

所以此处可以使用这个方法：

$(".reload,.title").on("click",function() {    }

但是在接下来的取indexB值的时候遇到了问题：$(".reloadimg")和 $(".title")他们的路径不一样，如何然他们取得index值相同呢？

这里就必须要对元素进行相对定位，找出他们的共同祖先元素，让我们往模板的结构里看：

                        

                        
                                
                                

                                
                    
                        
                        

                            

                                <%=items.classify%>
                                 <%=items.title%>
                                
                                    
                                <%=items.pubdate%>
                                

                            
                            

                                <%=items.intro%>
                            
                            

                                嘉
                                <%=items.name%>
                                
                                     
                                
                                职
                                <%=items.position%>
                                
                            
                        
                    

从这里可以看出他们的公共祖先元素自然就是$(".item")啦，所以，怎样让他们用一行代码就同时找到他们的公共祖先元素？而且是点击他们中的任意一项都能找到？我们自然想到了刚才的这种办法：

var indexB = $(this).parent().parent().index()

这里的$(this)指代的是当前项，既可以表示$(".img")，又可以表示$(".title")，但是从结构上看，$(".img")只用向上找两层就可以找到item,但是$(".title")却需要往上找三层才可以找到item,怎么办？

我们可以给$(".img")再套一个div:

                        

                            

                                
                                

                                
                            
                        
                        

                            

                                <%=items[i].classify%>
                                <%=items[i].title%>
                                <%=items[i].pubdate%>
                                
                            
                            

                                <%=items[i].intro%>
                            
                            

                                嘉
                                <%=items[i].name%>
                                职
                                <%=items[i].position%>
                                
                                888
                            
                        
                    

这样他们是不是就在同一层级了？

然后用：

var indexB = $(this).parent().parent().parent().index();

就可以获取到当前点击项和另一项的共同index啦！

然后将预览图的下标作为当前显示的国家数据中的urlpc值

var urlpc = jsArri[indexB].urlpc;
var title = jsArri[indexB].title;

最后使用layer插件：

在此奉上 layer弹出层插件官方演示文档

这里还需要判断客户端：

        if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)) {
                        //Layer弹窗开始
                        layer.open({
                            type: 2,
                            title: title,
                            area: ["320px", "240px"],
                            shade: 0.6,
                            closeBtn: 0,
                            shadeClose: true,
                            content: urlpc,
                        });
                    } else {
                        //Layer弹窗开始
                        layer.open({
                            type: 2,
                            title: title,
                            area: ["640px", "360px"],
                            shade: 0.6,
                            closeBtn: 0,
                            shadeClose: true,
                            content: urlpc,
                        });
                        layer.msg("点击任意处可关闭", function() {
                            time: 500
                        })
                        //Layer弹窗结束
                    }

OK，已经可以实现点击预览图显示对应的视频了！

同时别忘了给美国追加click事件，不然第一页的数据不显示，因为显示隐藏是通过click操作的：

    //加载第一项美国
            $("#Americia").trigger("click");

至此已经完成业务逻辑的重要部分，css移动端就不用说了，套boostrap就是，有疑问请评论。