{"id":1255,"date":"2013-05-11T17:34:23","date_gmt":"2013-05-11T17:34:23","guid":{"rendered":"http:\/\/brain.payzip.co.kr\/?p=1255"},"modified":"2013-05-11T17:34:23","modified_gmt":"2013-05-11T17:34:23","slug":"jquery-templatejquery-tmpl%ec%a0%9c%ec%9d%b4%ec%bf%bc%eb%a6%ac-%ed%85%9c%ed%94%8c%eb%a6%bf","status":"publish","type":"post","link":"https:\/\/blog.goorigo.com\/?p=1255","title":{"rendered":"jquery-template[jquery-tmpl][\uc81c\uc774\ucffc\ub9ac \ud15c\ud50c\ub9bf]"},"content":{"rendered":"

 <\/p>\n

jquery template\uacfc data binding\uc744 \ub3d9\uc2dc\uc5d0<\/p>\n

 <\/p>\n

———————————————————————————————-<\/p>\n

Templates plugin…<\/p>\n

 <\/p>\n

\uc774\ub984\ub9cc \ub4e4\uc5b4\ubcf4\uba74 \ubb50 \uac19\ub098\uc694?<\/p>\n

\uc774\ub984\ub300\ub85c\u00a0\ud15c\ud50c\ub808\uc774\ud2b8 \ub9cc\ub4e4\uc5b4\uc11c data\ub97c \ubc14\uc778\ub529 \uc2dc\ud0a4\ub294 \ud50c\ub7ec\uadf8\uc778\u00a0\uc785\ub2c8\ub2e4.<\/p>\n

 <\/p>\n

jquery 1.4.2 \uc774\uc0c1\uc758 \ubc84\uc804\uc5d0\uc11c \ub3d9\uc791\ud569\ub2c8\ub2e4. \ud15c\ud50c\ub808\uc774\ud2b8 \ud50c\ub7ec\uadf8\uc778\uc740 MS\ub791 \uacf5\ub3d9\uac1c\ubc1c \ud588\ub2e4\uace0 \ud558\ub124\uc694.<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

1. \uc124\uce58<\/p>\n

\uc77c\ub2e8 \ud15c\ud50c\ub808\uc774\ud2b8 \ud50c\ub7ec\uadf8\uc778\uc744 \ubc1b\uc544\uc57c \ud569\ub2c8\ub2e4.<\/p>\n

https:\/\/github.com\/jquery\/jquery-tmpl<\/a><\/p>\n


\n<\/a><\/p>\n

\"\"<\/p>\n

jquery.tmpl.js\ub97c \ubc1b\uc73c\uc2dc\uba74 \ub429\ub2c8\ub2e4. min \ubc84\uc804\uc744 \ubc1b\uc73c\uc154\ub3c4 \ub418\uace0 \uc77c\ubc18 \ubc84\uc804 \ubc1b\uc73c\uc154\ub3c4 \ub429\ub2c8\ub2e4.<\/p>\n

jquery.tmpPlus.js \ub294 \uc880\ub354 \ud15c\ud50c\ub808\uc774\ud2b8\ub97c \uc0ac\uc6a9 \uc27d\uac8c \ud558\uae30 \uc704\ud574\uc11c \uae30\ubcf8\uc801\uc778 jQuery \uba54\uc18c\ub4dc\ub4e4\uc744 \ud655\uc7a5\ud558\uae30 \uc704\ud55c \ud50c\ub7ec\uadf8\uc778 \uc785\ub2c8\ub2e4.<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

2. inline templates<\/p>\n

\uc778\ub77c\uc778 \ud15c\ud50c\ub808\uc774\ud2b8\ub294 html \ud398\uc774\uc9c0 \ub0b4\uc5d0\u00a0script \ud0dc\uadf8\ub97c \ud1b5\ud574\uc11c \ud15c\ud50c\ub9bf\uc744 \ub9cc\ub4dc\ub294 \uac81\ub2c8\ub2e4.<\/p>\n

\uc544\ub798 \uc608\uc800 \ubcf4\uc2dc\uba74..<\/p>\n

 <\/p>\n\n\n\n
<script<\/span>\u00a0<\/span>type<\/span>=<\/span>“text\/javascript”<\/span>\u00a0<\/span>src<\/span>=<\/span>“jquery-1.4.3.js”<\/span>><\/script><\/span>
\n<\/span><script<\/span>\u00a0<\/span>type<\/span>=<\/span>“text\/javascript”<\/span>\u00a0<\/span>src<\/span>=<\/span>“jquery.tmpl.js”<\/span>><\/script><\/span>
\n<\/span><script<\/span>\u00a0<\/span>type<\/span>=<\/span>“text\/javascript”<\/span>><\/span>
\n$(<\/span>function<\/span>()
\n{
\n<\/span>var<\/span>\u00a0data = [
\n{<\/span>“name”<\/span>\u00a0:<\/span>\u00a0“loudon23”<\/span>,\u00a0<\/span>“year”<\/span>\u00a0:<\/span>\u00a0“2010”<\/span>},
\n{<\/span>“name”<\/span>\u00a0:<\/span>\u00a0“loudon24”<\/span>,<\/span>\u00a0“year”<\/span>\u00a0:<\/span>\u00a0“2011”<\/span>}
\n];<\/p>\n

<\/span>\/\/ inline templates<\/span>
\n$(<\/span>“#item”<\/span>).tmpl(data).appendTo(<\/span>“#test”<\/span>);
\n}<\/span><\/script><\/span><\/p>\n


\n<\/span><\/p>\n

<!– inline templates –><\/span>
\n<\/span><script<\/span>\u00a0id<\/span>=<\/span>“item”<\/span>\u00a0<\/span>type<\/span>=<\/span>“text\/html”<\/span>><\/span>
\n<li><em>${name}<\/em> (${year})<\/li><\/span><\/script><\/span><\/p>\n


\n<\/span><ul\u00a0<\/span>id<\/span>=<\/span>“test”<\/span>><\/ul>\u00a0<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

data \uc758 \ub0b4\uc6a9\uc744 \ub9e8\uc544\ub798 script\ub0b4\uc758 \ud15c\ud50c\ub9bf\uc5d0 \ub9de\ucdb0\uc11c \ub370\uc774\ud130\ub97c \ub123\uace0\u00a0\ub9cc\ub4e4\uc5b4\uc9c4 html DOM \uac1d\uccb4\ub97c id\uac12\uc774 test(UL\ud0dc\uadf8)\uc5d0 \ub123\ub294\uac83\uc785\ub2c8\ub2e4.<\/p>\n

\ucd09\uc774 \uc624\uc2dc\uc8e0? \u314e\u314e<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

2. pre-complied templates<\/p>\n

\ub450\ubc88\uc9f8\ub85c \ub530\ub85c \ud15c\ud50c\ub9bf\uc744 \uc815\ud558\uc9c0 \uc54a\uace0 $.templates() \uba54\uc18c\ub4dc\ub97c \ud1b5\ud574\uc11c \ud15c\ud50c\ub9bf\uc744 \ub9cc\ub4dc\ub294 \uc608\uc800 \uc785\ub2c8\ub2e4.<\/p>\n

 <\/p>\n\n\n\n
<script<\/span>\u00a0<\/span>type<\/span>=<\/span>“text\/javascript”<\/span>\u00a0<\/span>src<\/span>=<\/span>“jquery-1.4.3.js”<\/span>><\/script><\/span>
\n<\/span><script<\/span>\u00a0<\/span>type<\/span>=<\/span>“text\/javascript”<\/span>\u00a0<\/span>src<\/span>=<\/span>“jquery.tmpl.js”<\/span>><\/script><\/span>
\n<\/span><script<\/span>\u00a0<\/span>type<\/span>=<\/span>“text\/javascript”<\/span>><\/span>
\n$(<\/span>function<\/span>()
\n{
\n<\/span>var<\/span>\u00a0data = [
\n{<\/span>“name”<\/span>\u00a0:<\/span>\u00a0“loudon23”<\/span>,\u00a0<\/span>“year”<\/span>\u00a0:<\/span>\u00a0“2010”<\/span>},
\n{<\/span>“name”<\/span>\u00a0:<\/span>\u00a0“loudon24”<\/span>,<\/span>\u00a0“year”<\/span>\u00a0:<\/span>\u00a0“2011”<\/span>}
\n];<\/p>\n

<\/span>\/\/ pre-complied templates<\/span>
\n$.template(<\/span>“listTmpl”<\/span>,\u00a0<\/span>“<\/span><li><em>${name}<\/em> (${year})<\/li><\/span>“<\/span>);<\/span><\/p>\n

\u00a0\u00a0\u00a0 $.tmpl(<\/span>“listTmpl”<\/span>,\u00a0<\/span>data).appendTo(<\/span>“#test”<\/span>);
\n}<\/span><\/script><\/span><\/p>\n


\n<\/span><\/p>\n

<ul\u00a0<\/span>id<\/span>=<\/span>“test”<\/span>><\/ul><\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

$.template()\ub85c listTempl \uc774\ub77c\ub294 \ud15c\ud50c\ub9bf\uc744 \ub9cc\ub4e4\uace0 $.tmpl() \uba54\uc18c\ub4dc\ub85c data\uc758 \uac12\uc744 \ubc14\uc778\ub529 \uc2dc\ud0a8\ud6c4 \ub9cc\ub4e4\uc5b4\uc9c4 html DOM \uc744 id\uac12\uc774 test\uc5d0\ub123\ub294 \uac83\uc785\ub2c8\ub2e4.<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

3. append\ub97c \uc774\uc6a9\ud55c templates<\/p>\n

\uc774 \ubc29\ubc95\uc740 jquery\uc758 \uae30\ubcf8 \uba54\uc18c\ub4dc\uc778 $.append()\ub97c \uc774\uc6a9\ud558\ub294 \ubc29\ubc95\uc785\ub2c8\ub2e4.\u00a0\u00a0\uc774 \ubc29\ubc95\uc744 \uc774\uc6a9\ud558\uae30 \uc704\ud574\uc11c\ub294 jquery.tmplPlus.js \ub97c \ucd94\uac00 \ud558\uc154\uc57c \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
<script<\/span>\u00a0<\/span>type<\/span>=<\/span>“text\/javascript”<\/span>\u00a0<\/span>src<\/span>=<\/span>“jquery-1.4.3.js”<\/span>><\/script><\/span>
\n<\/span><script<\/span>\u00a0<\/span>type<\/span>=<\/span>“text\/javascript”<\/span>\u00a0<\/span>src<\/span>=<\/span>“jquery.tmpl.js”<\/span>><\/script><\/span><\/p>\n

<script<\/span>\u00a0<\/span>type<\/span>=<\/span>“text\/javascript”<\/span>\u00a0<\/span>src<\/span>=<\/span>“jquery.tmplPlus.js”<\/span>><\/script><\/span>
\n<\/span><script<\/span>\u00a0<\/span>type<\/span>=<\/span>“text\/javascript”<\/span>><\/span>
\n$(<\/span>function<\/span>()
\n{
\n<\/span>var<\/span>\u00a0data = [
\n{<\/span>“name”<\/span>\u00a0:<\/span>\u00a0“loudon23”<\/span>,\u00a0<\/span>“year”<\/span>\u00a0:<\/span>\u00a0“2010”<\/span>},
\n{<\/span>“name”<\/span>\u00a0:<\/span>\u00a0“loudon24”<\/span>,<\/span>\u00a0“year”<\/span>\u00a0:<\/span>\u00a0“2011”<\/span>}
\n];\u00a0<\/span><\/p>\n

$(<\/span>“#test”<\/span>).append(<\/span>“<li><em>${name}<\/em> (${year})<\/li>”<\/span>, data);
\n}<\/span><\/script>\u00a0<\/span><\/p>\n


\n<\/span><\/p>\n

<ul\u00a0<\/span>id<\/span>=<\/span>“test”<\/span>><\/ul>\u00a0<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

id\uac00 test\uc778 \uac1d\uccb4\uc5d0 append()\uc5d0 \uc815\uc758\ub41c \uccab\ubc88\uc9f8 \uc778\uc790\uac12(\ud15c\ud50c\ub9bf)\uc744 data\uac12\uc73c\ub85c \ub9e4\uce6d \uc2dc\ud0a8 \ud6c4\uc5d0 append \ud558\ub294 \uc608\uc81c \uc785\ub2c8\ub2e4.<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

4. access templates data<\/p>\n

\ub9c8\uc9c0\ub9c9\uc73c\ub85c \ud15c\ud50c\ub9bf\uc73c\ub85c \ub9cc\ub4e4\uc5b4\uc9c4 htmlDOM \uac1d\uccb4\uc5d0\uc11c \ub2e4\uc2dc \ub370\uc774\ud130\ub97c \ubf51\uc544 \ub0b4\ub294 \ubc29\ubc95\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n
<script<\/span>\u00a0<\/span>type<\/span>=<\/span>“text\/javascript”<\/span>\u00a0<\/span>src<\/span>=<\/span>“jquery-1.4.3.js”<\/span>><\/script><\/span>
\n<\/span><script<\/span>\u00a0<\/span>type<\/span>=<\/span>“text\/javascript”<\/span>\u00a0<\/span>src<\/span>=<\/span>“jquery.tmpl.js”<\/span>><\/script><\/span>
\n<\/span><script<\/span>\u00a0<\/span>type<\/span>=<\/span>“text\/javascript”<\/span>><\/span>
\n$(<\/span>function<\/span>()
\n{
\n<\/span>var<\/span>\u00a0data = [
\n{<\/span>“name”<\/span>\u00a0:<\/span>\u00a0“loudon23”<\/span>,\u00a0<\/span>“year”<\/span>\u00a0:<\/span>\u00a0“2010”<\/span>},
\n{<\/span>“name”<\/span>\u00a0:<\/span>\u00a0“loudon24”<\/span>,<\/span>\u00a0“year”<\/span>\u00a0:<\/span>\u00a0“2011”<\/span>}
\n];<\/p>\n

<\/span>\/\/ inline templates<\/span>
\n$(<\/span>“#item”<\/span>).tmpl(data).appendTo(<\/span>“#test”<\/span>);<\/span><\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0<\/span>\/\/ access Template Data<\/span>
\n<\/span>var<\/span>\u00a0lastTemplateItem = $(<\/span>“ul li:last”<\/span>).tmplItem();
\n<\/span>var<\/span>\u00a0itemData = lastTemplateItem.data;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>\/\/ \ud15c\ud50c\ub808\uc774\ud2b8\uc758 \ub370\uc774\ud130 \uac00\uc838\uc624\uae30<\/span>
\n<\/span>var<\/span>\u00a0htmlNodes = lastTemplateItem.nodes;\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>\/\/ \ud15c\ud50c\ub808\uc774\ud2b8\uc774 \ub178\ub4dc\ub4e4 \uac00\uc838\uc624\uae30\u00a0<\/span>
\nalert(<\/span>“name:”\u00a0<\/span>+ itemData.name +\u00a0<\/span>” \/ year:”<\/span>+ itemData.year);\u00a0\u00a0\u00a0\u00a0<\/span><\/p>\n

}<\/span><\/script><\/span><\/p>\n


\n<\/span><\/p>\n

<!– inline templates –><\/span>
\n<\/span><script<\/span>\u00a0id<\/span>=<\/span>“item”<\/span>\u00a0<\/span>type<\/span>=<\/span>“text\/html”<\/span>><\/span>
\n<li><em>${name}<\/em> (${year})<\/li><\/span><\/script><\/span><\/p>\n


\n<\/span><ul\u00a0<\/span>id<\/span>=<\/span>“test”<\/span>><\/ul>\u00a0<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\uc778\ub77c\uc778 \ud15c\ud50c\ub9bf\uc73c\ub85c \uc815\uc758\ub41c \uac70\uc5d0\uc11c ul\ub0b4\uc758 \ub9c8\uc9c0\ub9c9 li \ub97c \ucd94\ucd9c\ud574\uc11c \ud15c\ud50c\ub9bf \uc544\uc774\ud15c\uc744 \ubf51\uc2b5\ub2c8\ub2e4( tmplItem() ) \uc774\uac83\uc744 \uac00\uc9c0\uace0 data\ub098 nodes \ub97c \ucd94\ucd9c \ud574\ub0b4\ub294 \uac83\uc785\ub2c8\ub2e4.<\/p>\n

\n

[\ucd9c\ucc98]<\/strong>\u00a0jQuery Templates \ud50c\ub7ec\uadf8\uc778<\/a>|\uc791\uc131\uc790<\/strong>\u00a0\ub8e8\ub4e0<\/a><\/p>\n<\/div>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

  jquery template\uacfc data binding\uc744 \ub3d9\uc2dc\uc5d0   ———————————————————————————————- Templates plugin…   \uc774\ub984\ub9cc \ub4e4\uc5b4\ubcf4\uba74 \ubb50 \uac19\ub098\uc694? \uc774\ub984\ub300\ub85c\u00a0\ud15c\ud50c\ub808\uc774\ud2b8 \ub9cc\ub4e4\uc5b4\uc11c data\ub97c \ubc14\uc778\ub529 \uc2dc\ud0a4\ub294 \ud50c\ub7ec\uadf8\uc778\u00a0\uc785\ub2c8\ub2e4.   jquery 1.4.2 \uc774\uc0c1\uc758 \ubc84\uc804\uc5d0\uc11c \ub3d9\uc791\ud569\ub2c8\ub2e4. \ud15c\ud50c\ub808\uc774\ud2b8 \ud50c\ub7ec\uadf8\uc778\uc740 MS\ub791… <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/posts\/1255"}],"collection":[{"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1255"}],"version-history":[{"count":0,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/posts\/1255\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1255"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1255"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1255"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}