htmlÑ»·´úÂëÔõôд
±àд html Ñ»·´úÂëµÄÒªÁì°üÀ¨£ºÊ¹Óà ºÍ ÔªËØ¡¢Ê¹Óà ºÍ ÔªËØ¡¢Ê¹Óà for »ò while Ñ»·½á¹¹¡¢Ê¹Óà html Ä£°åÓïÑÔ£¨Èç handlebars »ò underscore.js£©¡¢Ê¹Óà javascript äÖȾµÈ¡£
HTML Ñ»·´úÂë
ÔõÑù±àд HTML Ñ»·´úÂ룿
ʹÓÃ
ºÍ
ÔªËØ£º
µÇ¼ºó¸´ÖÆ
ÏîÄ¿ 1
ÏîÄ¿ 2
ÏîÄ¿ 3
ʹÓÃ
ºÍ
ÔªËØ£¨ÓÐÐòÁÐ±í£©£º
Á¬Ã¦Ñ§Ï°¡°Ç°¶ËÃâ·ÑѧϰÌõ¼Ç£¨ÉîÈ룩¡±£»
<ol> <li>ÏîÄ¿ 1</li> <li>ÏîÄ¿ 2</li> <li>ÏîÄ¿ 3</li> </ol>
µÇ¼ºó¸´ÖÆ
ʹÓÃÑ»·½á¹¹£¨ÀýÈç for »ò while£©£º
<!-- ʹÓà for Ñ»· -->
µÇ¼ºó¸´ÖÆ
ÏîÄ¿ ” . ($i + 1) . “”; } ?>
ÏîÄ¿ ” . ($i + 1) . “”; $i++; } ?>
ʹÓà HTML Ä£°åÓïÑÔ£º
<!-- ʹÓà Handlebars Ä£°å --> <script id="item-template" type="text/x-handlebars-template"> <li>{{name}} </script><!-- ʹÓà Underscore.js Ä£°å --><script type="text/template" id="item-template"> <li><%= name %> </script><!-- ʹÓà JavaScript äÖȾ -->
µÇ¼ºó¸´ÖÆ
<script> const items = [ { name: “ÏîÄ¿ 1” }, { name: “ÏîÄ¿ 2” }, { name: “ÏîÄ¿ 3” }, ]; // ʹÓà Handlebars äÖȾ const source = $(“#item-template”).html(); const template = Handlebars.compile(source); const html = items.map(template).join(“”); $(“#item-list”).html(html); // ʹÓà Underscore.js äÖȾ const template = _.template($(“#item-template”).html()); const html = items.map(template).join(“”); $(“#item-list”).html(html); </script>
ÒÔÉϾÍÊÇhtmlÑ»·´úÂëÔõôдµÄÏêϸÄÚÈÝ£¬¸ü¶àÇë¹Ø×¢±¾ÍøÄÚÆäËüÏà¹ØÎÄÕ£¡