arttemplate模板--绑定集合

最新推荐文章于 2025-05-21 20:10:03 发布

强哥blog

最新推荐文章于 2025-05-21 20:10:03 发布

阅读量1.8k

点赞数

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/qq_36263601/article/details/73189281

版权

JavaScript 专栏收录该内容

34 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script src='template.js'></script>
</head>
<body>
<div id='mydiv'></div>
</body>
</html>
<!--模板王者演示-->
<script id="arttemplate" type="text/html">
    <h2>{{name}}</h2>
    <ul>
        {{each films}}
        <li>
            <strong>电影名称：</strong>{{$value.title}}<br>
            <strong style='color:red'>导演</strong>{{$value.lead}}
            <strong style='color:green'>主演:</strong>{{$value.role}}
        </li>
        {{/each}}
    </ul>
</script>

<script>

    //定义数据
    var data ={
        name:'电影列表',
        films:
                [
                    {
                        title: '复仇者联盟2',
                        lead: '乔斯·韦登',
                        role: '小罗伯特·唐尼'
                    },
                    {
                        title: '速度与激情7',
                        lead: '范·迪塞尔',
                        role: '范·迪塞尔'
                    },
                    {
                        title: '左耳',
                        lead: '苏有朋',
                        role: '苏有朋'
                    },
                    {
                        title: '万物生长',
                        lead: '范冰冰',
                        role: '范冰冰 韩庚'
                    },
                    {
                        title: '盗墓笔记',
                        lead: '苏有朋',
                        role: '美人鱼'
                    }
                ]
    }
    //封装成一个函数
    function BindTemplate(data, divid, Template) {
        //alert(divid);
        //alert(Template);
        var html = template(Template, data);
        document.getElementById(divid).innerHTML = html;
    }
    BindTemplate(data,'mydiv','arttemplate')
</script>