jQuery: 做一个简单的模版加载

直接上,简单明了的一小段代码:

<head>
    <!-- 依赖:jQuery, underscore -->
    <script src="//cdn.bootcss.com/underscore.js/1.8.3/underscore-min.js"></script>
    <script src="//cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.js"></script>
</head>



<body>
<!-- 业务部分 HTML -->
<table id="sample"></table>

<!-- 脚本 -->
<script> // 加载模版 $(function() { var tpls = $.tpls = {}; $('[type=x-html-template]').each(function(ind, tpl) { tpls[tpl.id] = _.template(tpl.innerHTML); $(tpl).remove(); }); }); // 业务逻辑 $(function() { var users = [ {firstName: 'Alex', lastName: 'Enderby'}, {firstName: 'Bill', lastName: 'Smith'} ]; // 使用模版 _.each(users, function(user) { var tpl = $.tpls['tpl-row']; $('#sample').append(tpl(user)); }); }); </script>

<!-- 多多的弄几个模版,通过 $.tpls[NAME] 的方式获取对象 -->
<script type="x-html-template" id="tpl-row"> <tr> <td><%= firstName %></td> <td><%= lastName %></td> </tr> </script>

</body>

你可能感兴趣的:(jquery,underscore)