************************************************************ XMLHttpRequest Library ------------------------------------------------------------ template.js (ver. 0.10.0) 【 種別 】 フリーウェア 【 転載 】 可 【 著作権 】 (C) Wataru Kanzaki, Wings-Winds, 2007 ************************************************************ ・ダウンロードしていただきありがとうございます。 XMLHttpRequestライブラリです。 解凍すると以下のファイルが作成されます。 readme.txt(このファイル) template.js 使い方 ----- テンプレート作成 ------------------------ {tpl::repeat=/students} {tpl:account} {tpl:name} {tpl::endrepeat} {tpl::if=account=2">

{tpl:firstname}

{tpl::elif=account=3">

{tpl:familyname}

{tpl::else">

{tpl:name}

{tpl::endif"> {tpl:name} {tpl:var} ----- テンプレート読み込み ------------------------ Template.Load( { templateID: 'uri' ,templateID2:'tpldetail.txt' ,templateID3:'tpldetail2.txt' ,templateID4:'tpldetail2.txt' } , { user:'' ,password:'' } ); ----- HTMLコード作成 -------------------------- html = Template.GetHTML('templateID', data); ----- DOMエレメント作成 ----------------------- domlist = Template.GetDOM('templateID', data)); ----- HTMLコード作成とドキュメントへの挿入 ---- Template.InsertHTML('elementID', 'templateID', data); ----- DOMエレメント作成とドキュメントへの挿入 - emplate.GetDOM('elementID', 'templateID', data)); ################################ テンプレート HTML/XHTML/XML、またはプレーンテキストファイル "{tpl:" から始まり "}"で終わる部分にJavaScriptオブジェクトのプロパティが適用されます。 ":"で始まるいくつかのキーワードがスクリプト内で使用されます。 ====== キーワード ============ {tpl::repeat= expr } {tpl::endrepeat} JavaScriptオブジェクトの階層下の配列を、その配列の個数文だけ繰り返します。 exprはディレクトリツリー(URL)と同じ記法 ------------------------ {tpl::repeat=/students} {tpl:account} {tpl:name} {tpl::endrepeat} 詳しい使い方はオンラインドキュメント http://home.wi-wi.jp/software/web/template/ をご覧下さい。 ====== キーワード ============ {tpl::evenodd= num } repeatの内部で使用すると、repeatの繰り返しごとに"even"と"odd"が出力されます。 numを省略すると"even"と"odd" numは数値を指定可能、3以上の場合に "odd"の後ろに1からの連番が付きます。 繰り返しは1(1行目)から始まりますので、 num指定なし、または3未満が指定された場合はoddから始まります。 3以上が指定された場合は、 3が指定された場合はodd1、odd2、even 4が指定された場合はodd1、odd2、odd3、even という繰り返しになります。 repeatの外で指定すると、常にoddとなります。 ---- sample ------------ evenodd の引数なし {tpl::repeat=students} {tpl:id}{tpl:name} {tpl::endrepeat} 出力 id1name1 id2name2 id3name3 id4name4 ---- sample ------------ evenodd の引数に3を指定 {tpl::repeat=students} {tpl:id}{tpl:name} {tpl::endrepeat} 出力 id1name1 id2name2 id3name3 id4name4 ====== キーワード ============ {tpl::if= expr "> {tpl::elif= expr "> {tpl::else"> {tpl::endif"> 通常のif構文です。 {tpl::if=left==right} の形式、または {tpl::if=expr}の形式で記述 左辺、右辺がある時の比較式は == または != 単項式の場合は booleanとして判断します。 四則計算に使用出来る演算子は + - * / 0除算は0となります。 それぞれの式の中に数字以外の文字があると、 オブジェクトのプロパティーと見なし、その値を代入します。 / を区切りとしてオブジェクトのプロパティーツリーを追うことが出来ますが、 割り算の/と区別するためにクォートして下さい。 ---- sample ------------ {tpl::if="students/birth/month"==4} data = { students:[ {name:'Joe', birth: {month:'3', day: '12}, sex: 1} ,{name:'Peat', birth: {month:'6', day: '21}, sex: 1} ,{name:'Yuko', birth: {month:'12', day: '2}, sex: 2} ] }; クォートしていないと data['students'] / data['birth'] / data['month'] という割り算として計算し、0となります。 ---- sample ------------ {tpl::if=id==2">

ID: 2 の時に表示される項目

{tpl::elif=id==3">

ID: 3 の時に表示される項目

{tpl::else">

ID: 2 でもID:3でもない時に表示される項目

{tpl::endif"> data{id: 2}を 使用したときは if 文が表示される。 data{id: 6}を 使用したときは else 文が表示される。 ====== 変数 ============ {tpl:var} オブジェクトのプロパティーと見なし、その値を代入します。 Templateで使用するキーワードと区別するため、区切り文字の : は 1つです。 ---- sample ------------

{tpl:name}

data={name: 'kanzaki'}; var html=Template.GetHTML(tplid, data); //html

kanzaki

################################ Template.Load(files, option) テンプレートファイルをロードします。 XMLHttpRequest、またはActiveXObjectの Microsoft.XMLHTTP, Msxml2.XMLHTTP, Msxml2.XMLHTTP.2.0, Msxml2.XMLHTTP.3.0 のいずれかが使えるブラウザのみ動作します。 ----- arguments ----------- files (オブジェクト) {ID1: ファイル1, ID2: ファイル2 [, ...] } このIDはテンプレートからHTMLやDOMノードツリーを作成するときに参照します。 Load()関数は何度でも呼び出せますが、IDは共有されます。 同じIDが指定された場合は上書きされます。 option (オブジェクト) method: (string) 送信メソッド postData: (string) サーバーに送信するデータ user: (string) Authroizationが必要なページで使用するユーザー名 password: (string) Authroizationが必要なページで使用するパスワード onsuccess: (function) (未実装) Load()関数が呼び出されたときの第一引数のセットを1つのグループとして、 全てのファイルを読み終えた後に実行されるコールバック関数です。 エラーがあった場合でも呼び出されます。 onload オブジェクト (未実装) {id: callback, id2: callback, id3: callback [, ...]} 第1引数のIDに対応するコールバック関数。 それぞれのファイルの読み込み完了時に呼び出されます。 slt: オブジェクト (未実装) {id1: URI, id2: URI [, ...]} XMLファイルに適用するXSLファイル。 第1引数のIDとは関係ありません。 XSLファイルを使用するにはTemplate.GETXML()関数を使用してください。 ---- sample ------------ Template.Load( { id: 'uri' ,id2:'tpldetail.txt' ,id3:'tpldetail2.tpl' ,id4:'tpldetail2.xml' } , { onsuccess:callback // default: null ,onload:{id: callback, id2: callback, id3: callback} // default: null ,slt: {id1 :'style1.xsl',id2: 'style2.xsl'} } ); ################################ Template.LoadMixed(uri, flist, option) Template.Load()と同等の機能を、multipart/form-dataを使用して送受信します。 複数のテンプレートファイルを使用する場合でも、1回のリクエストで受信できます。 サーバーがmultipart/form-dataまたはmultipart/mixedを送信できるか、 multipart/mixedのフォーマットに併せてテキストファイルを作成し、擬似的なmultipart/mixedデータを作ることもできます。 この場合のMIME-Typeはtext/html text/plainに対応。 Mac iCabはmultipart/mixed、multipart/form-dataの受信に対応していません。 疑似ファイルを使用する受信方法は対応しています。 ----- arguments ----------- url (%URI) データ送信先URI flist (Object) テンプレートIDとテンプレートファイルのリスト Template.Load()の第一引数と同じ。 option (Object) データ受信に必要なサーバーに送信するデータ Template.Load()の第二引数と同じ。 method: (string) 送信メソッド postData: (string) サーバーに送信するデータ user: (string) Authroizationが必要なページで使用するユーザー名 password: (string) Authroizationが必要なページで使用するパスワード onsuccess: (function) (未実装) Load()関数が呼び出されたときの第一引数のセットを1つのグループとして、 全てのファイルを読み終えた後に実行されるコールバック関数です。 エラーがあった場合でも呼び出されます。 onload オブジェクト (未実装) {id: callback, id2: callback, id3: callback [, ...]} 第1引数のIDに対応するコールバック関数。 それぞれのファイルの読み込み完了時に呼び出されます。 slt: オブジェクト (未実装) {id1: URI, id2: URI [, ...]} XMLファイルに適用するXSLファイル。 第1引数のIDとは関係ありません。 XSLファイルを使用するにはTemplate.GETXML()関数を使用してください。 ################################ Template.GetHTML(ID, data) 戻り値は通常の文字列です。 Load()で指定されていないIDが指定された場合、 またはLoad()に失敗したファイルのIDが指定された場合は空文字列が返されます。 ----- arguments ----------- ID (string) Load()の第一引数のIDに対応。 data (オブジェクト) {id1: value1, id2: value2 [...]} テンプレートの{tpl:id}に適用するデータ ---- sample ------------ document.getElementById('docid').innerHTML=Template.GetHTML('id', {name:'Joe',age:33}); ======================== このファイルをTemplate.GetXML()で取得する場合、Template.GetXML()の引数のxlsファイル指定が必須。 Template.GetXML()が呼び出された後でxlsファイルが読まれるため、1回目のみ時間がかかることがあります。 2回目以降はキャッシュファイルを使用します。 Template.GetXML()で取得する場合はXMLの文法に厳密に則していなければなりません。 ======================== 1つのテンプレートで完結しない場合は、1回ずつinnerHTMLに代入するのではなく、 先に必要なテンプレートを全て読み込んでから、まとめてinnerHTMLに容れてください。 Template.Load( { head: 'head.tpl' foot: 'foot.tpl' cont: 'cont.tpl' } ); head.tpl ------------------------

User Names

<- 開始タグで終わる ------------------------ foot.tpl ------------------------
<- 終了タグから始まる

Endof Table

------------------------ cont.tpl ------------------------ {tpl::contain} ------------------------ document.getElementById('docid').innerHTML= Template.GetHTML('head') + Template.GetHTML('cont', {contain:'contants'}) + Template.GetHTML('foot'); この形式のテンプレートはGetDOMで取得すると開始タグで終わるエレメントは閉じられます。 終了タグで始まるタグは無視されます。 GetXMLはエラー(null)になります。 ======================== InternetExprorerにおいて、テーブルコンテンツのtbodyやtrだけを挿入する場合など、 innerHTMLを使用できない場合はTemplate.GetDOM()を使用してください。 table.tpl ------------------------ 1行1列1行2列 2行1列2行2列 ------------------------ HTML ------------------------
------------------------ // ERROR tbody=document.getElementById('tableid').getElementsByTagName('tbody')[0]; tbody.innerHTML=Template.GetHTML(table, data) // SUCCESS domarray = Template.GetHTML(table, data) tbody = document.getElementById('tableid').getElementsByTagName('tbody')[0]; for(var i=0;i 1行1列1行2列 2行1列2行2列 ################################ Template.GetDOM(ID, data, namespace) DOMエレメント 戻り値はリスト(配列)となります。 ----- arguments ----------- ID (string) Load()の第一引数のIDに対応。 data (オブジェクト) {id1: value1, id2: value2 [...]} テンプレートの{tpl:id}に適用するデータ namespace XHTMLで作成している場合に true、または、htmlタグのxmlns属性を指定してください。 DOMエレメント作成時にnamespace付きで作成するようになります。 XHTML1.0、XHTML1.1では xmlns属性は "http://www.w3.org/1999/xhtml" と決まっています。 ---- sample ------------ template.tpl ------------------------

{tpl:title}

{tpl:summary}

------------------------ domarray=Template.GetDOM(tplId, {title:'学生簿', summary:'2年1組男子生徒一覧'}); docobj=document.getElementById('doc'); for(var id=0;i {tpl:sid} {tpl:name} {tpl::endrepeat} ------------------------ data={students:[ {sid:1, name:'Joe'} ,{age:2, name:'Peat'} ]}; domarray=Template.GetDOM(tplId, data); table=document.getElementsByTagName('table')[0]; tbody=table.getElementsByTagName('tbody')[0] for(var i=0;i

{tpl:title}

{tpl:summary}

------------------------ document.getElementById('doc').appendChild( Template.GetDOM(tplId, {title:'学生簿', summary:'2年1組男子生徒一覧'})[0] ); ======================== Safariでは配列に対してfor(var i in domarray)を使うと取得できないことがあります。 for(var i=0;i

ヘッダ

コンテンツ

------------------------ template.tpl : NG ------------------------

ヘッダ

コンテンツ

------------------------ ------------------------ 検討中の項目 Template.Load()が呼び出されたときにsltオプションが指定されていないときはTemplate.GetXML()で必須。 Template.GetXML()でsltオプションが指定されていないときはTemplate.Load()の時の1つめのsltファイルが使用されます。 Template.Load()で指定されておらず、Template.GetXML()でも指定されていないときはデフォルトのスタイルが適用されます。 ------------------------ ################################ Template.InsertHTML(Element, ID, data) 指定したエレメントにinnerHTMLを挿入します。 第一引数にドキュメント内のエレメントID、またはエレメントオブジェクトを指定します。 それ以外はTemplate.GetHTMLと同じです。 戻り値は成功時true、失敗時false ----- arguments ----------- Element (String|Object) Document内のエレメントID、またはエレメントオブジェクト ID (string) Load()の第一引数のIDに対応。 data (オブジェクト) {id1: value1, id2: value2 [...]} テンプレートの{tpl:id}に適用するデータ ---- sample ------------ Template.InsertHTML('doc', tplId, {title:'学生簿', summary:'2年1組男子生徒一覧'}); ------------------------ Template.GetHTMLを使用する以下の記述と同じ結果になります。 document.getElementById('doc').innerHTML=Template.GetHTML(tplId, {title:'学生簿', summary:'2年1組男子生徒一覧'}); ################################ Template.InsertDOM(Element, ID, data, add, namespace) 指定したエレメントにDOMオブジェクトのリストを挿入します。 第一引数にドキュメント内のエレメントID、またはエレメントオブジェクトを指定します。 それ以外はTemplate.GetHTML、Template.GetDOMと同じです。 戻り値は成功時true、失敗時false ----- arguments ----------- Element (String|Object) Document内のエレメントID、またはエレメントオブジェクト ID (string) Load()の第一引数のIDに対応。 data (Object) {id1: value1, id2: value2 [...]} テンプレートの{tpl:id}に適用するデータ add (Boolean | Number) true : エレメントのchildNodesに追加します。 false || 0 : エレメントのchildNodesを全て削除し、新しいデータで置き換えます。 正の整数 : エレメントのchildNodesを数値分を残し、最後に追加します。 数値を越えた分は、最初のデータから削除します。(未実装) 負の整数 : エレメントのchildNodesを絶対値の数値分を残し、最初から追加します。 数値を越えた分は、最後のデータから削除します。(未実装) ---- sample ------------ template.tpl ------------------------

{tpl:title}

{tpl:summary}

------------------------ Template.InsertDOM('doc', tplId, {title:'学生簿', summary:'2年1組男子生徒一覧'}); ------------------------ Template.GetDOMを使用する以下の記述と同じ結果になります。 domarray=Template.GetDOM(tplId, {title:'学生簿', summary:'2年1組男子生徒一覧'}); docobj=document.getElementById('doc'); for(var id=0;i{tpl:title}

{tpl:summary}

------------------------ domarray=Template.GetFromURI('dom', tplId, 'data.cgi'); docobj=document.getElementById('doc'); for(var id=0;i1行目 2行目 ------------------------ このようなHTMLではDOM Treeはすべて子要素として内包されます。 - - - Template.GetHTML()では、このような記述はブラウザの機能に任せることになります。 Template.GetHTML()でinnerHTMLに挿入した場合と、Template.GetDOM()を使用して挿入する場合に違いが出る場合は、 タグの閉じ忘れを確認してみてください。 =====================