Templalien jQueryを使用したテンプレートエンジンもどき
テンプレートエンジン的な使い方をするテンプレートエンジン以外の何かを作ってみました。
JUI発表版のTwittelienで必要になったので作ったけどとりあえず版なので性能とか度外視です。
Templalien本体
function Templalien(template){ this._template = jQuery(template); }; Templalien.prototype.merge = function(context){ var template = this._template.clone(); jQuery.each(context,function(selector,func){ var elem = selector ? template.find(selector) : template; func(elem); }); return template; };
これだけ
使い方
まず、コンストラクタに部分HTMLを渡してインスタンスを作る
entry = new Templalien([ '<tr class="hentry_hover">' ,' <td class="thumb vcard author">' ,' <a class="url"><img id="profile-image" class="photo fn"/></a>' ,' <a class="anchor"></a>' ,' </td>' ,' <td class="content">' ,' <strong><a></a></strong>' ,' <span class="entry-content"></span>' ,' <span class="meta entry-meta">' ,' <a rel="bookmark" class="entry-date"><abbr class="published"></abbr></a>' ,' from web' ,' </span>' ,' </td>' ,' <td width="10" align="right">' ,' <div class="status_actions" >' ,' <a href="#">' ,' <img border="0" title="Favorite this update" src="http://assets2.twitter.com/images/icon_star_empty.gif" id="status_star_809356512" alt="Icon_star_empty"/>' ,' </a>' ,' <a href="#">' ,' <img border="0" title="reply to Hedachi" src="http://assets1.twitter.com/images/reply.png" alt="reply to Hedachi"/>' ,' </a>' ,' </div>' ,' </td>' ,'</tr>' ].join('') );
CSSセレクタがkey、該当の要素を操作してやる関数をvalueとしたオブジェクトを渡してやる。
/* 略 */ var context = { '':function(elem){elem.attr('id',status_id);} ,'.url':function(elem){elem.attr('href',userUrl);} ,'.anchor':function(elem){elem.attr('name',status_id);} ,'.url>img':function(elem){elem.attr('src',profile_image).attr('alt',nick_name);} ,'.content>strong>a':function(elem){elem.attr('href',userUrl).attr('title',nick_name).text(use_name);} ,'.entry-date':function(elem){elem.attr('href',entry_url);} ,'.published':function(elem){elem.attr(published.toString());} ,'.status_actions':function(elem){elem.attr('id','status_actions_'+entry_id);} ,'.entry-content':function(elem){$.each(entry_content,function(i,value){elem.append(value);});} }; entry.merge(context);
テンプレートに値が注入されたDOMツリーが返ってきます。
最初に作ったTemplalienインスタンスは何度でも使えます。