************************************************************ XMLHttpRequest Library ------------------------------------------------------------ template.js (ver. 0.10.0) 【 種別 】 フリーウェア 【 転載 】 可 【 著作権 】 (C) Wataru Kanzaki, Wings-Winds, 2007 ************************************************************ ・ダウンロードしていただきありがとうございます。 XMLHttpRequestライブラリです。 解凍すると以下のファイルが作成されます。 readme.txt(このファイル) template.js 使い方 ----- テンプレート作成 ------------------------ {tpl::repeat=/students}
{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}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); //htmlkanzaki
################################ 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 ------------------------Endof Table
{tpl:summary}
------------------------ domarray=Template.GetDOM(tplId, {title:'学生簿', summary:'2年1組男子生徒一覧'}); docobj=document.getElementById('doc'); for(var id=0;i{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: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:summary}
------------------------ domarray=Template.GetFromURI('dom', tplId, 'data.cgi'); docobj=document.getElementById('doc'); for(var id=0;i、