Loadsh的第一次使用

最新推荐文章于 2023-06-30 20:08:57 发布

原创最新推荐文章于 2023-06-30 20:08:57 发布 · 330 阅读

0 ·

CC 4.0 BY-SA版权

NodeJS 专栏收录该内容

94 篇文章

订阅专栏

这个博客展示了如何利用jQuery、lodash库来动态渲染HTML内容。通过定义两个模板（tpl1和tpl2），并结合数据数组，分别将数据填充到页面的两个div元素中。示例数据包括电影名称、URL和导演信息。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>

<div id="example1"></div>
<div id="example2"></div>

<script type="text/template" id="tpl1">
<% _.each(datas, function (item) { %>
    <div class="outer">
        <%= item.film %> - <%= item.url %> - <%= item.director %>
    </div>
<% }); %>
</script>
<script type="text/template" id="tpl2">
<% if ( 2 + 4 === 6 ) {
    _.each(datas, function (item) { %>
        <div class="outer">
            <%= item.film %> - <%= item.url %> - <%= item.director %>
        </div>
    <% });
} %>
</script>

<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/lodash.js/4.16.6/lodash.min.js"></script>
<script type="text/javascript">
var datas = [
    {
        film: '电影名称1',
        url: 'http://www.baidu.com',
        director: '导演名称1'
    },
    {
        film: '电影名称2',
        url: 'http://www.baidu.com',
        director: '导演名称2'
    },
    {
        film: '电影名称3',
        url: 'http://www.baidu.com',
        director: '导演名称4'
    },
    {
        film: '电影名称4',
        url: 'http://www.baidu.com',
        director: '导演名称4'
    },
];

$('#example1').html( _.template($('#tpl1').html(), datas) );
$('#example2').html( _.template($('#tpl2').html(), datas) );
</script>

</body>
</html>