Dabten Usage : テンプレートからのHTML生成 (methods)

UP PREV NEXT

Dabten.GetHTML(ID, data)

戻り値は通常の文字列です。
Dabten.Load()で指定されていないIDが指定された場合、
またはDabten.Load()に失敗したファイルのIDが指定された場合は空文字列が返されます。

---- 引数 ----

ID (String)
Dabten.Load()の第一引数のIDに対応。
data (Object)
{var: value [, ...] } | {wrapper: [{var: value [, ...] } ]}
 テンプレートの{tpl:var}に適用するデータ

---- サンプル ----

document.getElementById('docid').innerHTML
         = Dabten.GetHTML('id', {name:'Joe',age:33});

UP PREV NEXT

Dabten.GetDOM(tpl, data, namespace)

DOMエレメント
戻り値はリスト(配列)となります。

---- 引数 ----

tpl (String)
Dabten.Load()の第一引数のIDに対応するテンプレートID。
data (Object)
{var: value [, ...] } | {wrapper: [{var: value [, ...] } ]}
 テンプレートの{tpl:var}に適用するデータ
namespace (Boolean||String , Default: true)
trueが指定されるとXHTMLで作成している場合にhtmlタグのxmlns属性を取得し、DOMエレメント生成時のnamespaceとして使用します。
falseが指定されるとXHTMLの時でもnamespaceは使用しません。
独自のnamespaceを指定するときは、文字列で指定してください。
XHTML1.0、XHTML1.1では xmlns属性は "https://www.w3.org/1999/xhtml" と決まっています。

---- サンプル .1 ----

template.tpl

<h1>{tpl:title}</h1>
<p>{tpl:summary}</p>

script

domarray=Dabten.GetDOM(tplId, {title:'学生簿', summary:'２年１組男子生徒一覧'});
docobj=document.getElementById('doc');
for(var id=0;i<domarray.length;i++){
  docobj.appendChild(domarray[i]);
}

---- サンプル .2----

template.tpl

{tpl::repeat=students}
<tr>
<td>{tpl:sid}</td>
<td>{tpl:name}</th>
</tr>
{tpl::endrepeat}

script

data={students:[
  {sid:1, name:'Joe'}
 ,{age:2, name:'Peat'}
]};

domarray=Dabten.GetDOM(tplId, data);
table=document.getElementsByTagName('table')[0];
tbody=table.getElementsByTagName('tbody')[0];
for(var i=0;i<domarray.length;i++){

  tbody.appendChild(domobj[i]);
}

UP PREV NEXT

Dabten.InsertHTML(element, tpl, Object)

Dabten.GetHTML()で作成したHTMLを、第一引数で指定したエレメントに入れ換えます。

戻り値は成功時 true、失敗時 false

---- 引数 ----

element (String | HTML-DOM-Element)
HTML/XHTMLドキュメント内の要素、またはそのID
tpl (String)
Dabten.Load()の第一引数のIDに対応するテンプレートID。
data (Object)
{var: value [, ...] } | {wrapper: [{var: value [, ...] } ]}
 テンプレートの{tpl:var}に適用するデータ

---- サンプル .1 ----

Dabten.InsertHTML('docid', 'tplid', {name:'Joe',age:33});

---- サンプル .2 ----

var elm=document.getElementById('docid');
Dabten.InsertHTML(elm, 'tplid', {name:'Joe',age:33});

UP PREV NEXT

Dabten.InsertDOM(element, tpl, data, add, namespace)

Dabten.GetDOM()で作成したDOMエレメントを、第一引数で指定したエレメントに追加、または入れ換えます。

戻り値は成功時 true、失敗時 false

---- 引数 ----

element (String | HTML-DOM-Element)
HTML/XHTMLドキュメント内の要素、またはそのID
tpl (String)
Dabten.Load()の第一引数のIDに対応するテンプレートID。
data (Object)
{var: value [, ...] } | {wrapper: [{var: value [, ...] } ]}
 テンプレートの{tpl:var}に適用するデータ
add (Boolean , Default: false)
HTMLを追加(true)するか更新(false)するかの指定。
namespace (Boolean||String , Default: true)
trueが指定されるとXHTMLで作成している場合にhtmlタグのxmlns属性を取得し、DOMエレメント生成時のnamespaceとして使用します。
falseが指定されるとXHTMLの時でもnamespaceは使用しません。
独自のnamespaceを指定するときは、文字列で指定してください。
DOMエレメント作成時にnamespace付きで作成するようになります。
XHTML1.0、XHTML1.1では xmlns属性は "https://www.w3.org/1999/xhtml" と決まっています。

---- サンプル .1 ----

Dabten.InsertDOM('docid', 'tplid', {name:'Joe',age:33});

UP PREV NEXT

Dabten.GetFromURI(type, tpl, uri, option)

Dabten.GetHTML()、Dabten.GetDOM()の代わりに
CGIスクリプトなどのデータを受信し、テンプレートに適用します。
CGIスクリプトから取得するデータは、プレーンテキスト(JSON)、またはXMLファイルです。
戻り値は、正常に完了すればtrue、失敗すればfalse
asyncがtrueの場合は、データの送信完了後に戻り値を返し、データの受信は判断しません。

---- 引数 ----

type (String)
'html', 'dom', 'text'のいずれか
戻り値のタイプをHTML、HTML-DOMエレメント、プレーンテキストのいずれかにします。
tpl (String)
Dabten.Load()の第一引数のIDに対応するテンプレートID。
uri (String)
データ受信のためのCGIスクリプトのURI
option (%CorrespondData)
サーバーに送信するデータ
%CorrespondDataについて
%CorrespondDataからの変更点
namespace: (String , default: null)
XHTML/SMLのノードに適用するnamespace
第一引数 type が'dom'の時に有効。
XHTMLで作成している場合に true、または、<html>タグのxmlns属性を指定してください。

コールバック関数の引数

function callback(tpl, data, result)

テンプレートID、受信したデータ、作成したデータを渡します。

---- 引数 ----

tpl (String)
Dabten.Load()の第一引数のIDに対応するテンプレートID。
data (Object | String | null)
受信したテキストデータをJSON形式に変換したもの。
Dabten.GetFromURI()の第1引数に'text'を指定すると、nullとなります。
result (Boolean)
テンプレートの反映が成功したかどうか

---- サンプル ----

template.tpl

<h1>{tpl:title}</h1>
<p>{tpl:summary}</p>

script

Dabten.GetFromURI('dom', tplId, 'data.cgi', callback);

function callback(domarray){
  docobj=document.getElementById('doc');
  for(var id=0;i<domarray.length;i++){
    docobj.appendChild(domarray[i]);
  }
}

受け取り時のデータはXMLデータ(responseXML)、または通常のeval(responseText)を使用してJavaScriptのObject（JSON）に変換できる形式のみ対応しています。

UP PREV NEXT

Dabten.InsertFromURI(element, type, tpl, uri, option)

CGIスクリプトなどのデータを受信し、テンプレートに適用、ドキュメントに挿入します。
CGIスクリプトから取得するデータは、プレーンテキスト(JSON)、またはXMLファイルです。

戻り値は、正常に完了すればtrue、失敗すればfalse
asyncがtrueの場合は、データの送信完了後に戻り値を返し、データの受信は判断しません。

---- 引数 ----

element (String | HTML-DOM-Element | null)
HTML/XHTMLドキュメント内の要素、またはそのID
null指定時はDabten.GetFromURIと同等になります。
type (String)
'html', 'dom', 'text'のいずれか
戻り値のタイプをHTML、HTML-DOMエレメント、プレーンテキストのいずれかにします。
tpl (String)
テンプレートID
Dabten.Load()の第一引数のIDに対応。
第2引数が'text'の場合は、空文字列('')でも可
uri (String)
データ受信のためのCGIスクリプトのURI
option (%CorrespondData)
サーバーに送信するデータ
%CorrespondDataについての説明はこちら
%CorrespondDataからの変更点
namespace: (String , default: null)
XHTML/SMLのノードに適用するnamespace
第一引数 type が'dom'の時に有効。
XHTMLで作成している場合に true、または、<html>タグのxmlns属性を指定してください。

コールバック関数の引数

function callback(elm, tpl, data, success)

エレメント、テンプレートID、受信したデータを渡します。

---- 引数 ----

element (HTML-DOM-Element)
HTML/XHTMLドキュメント内の要素
InsertFromURI()の第一引数のエレメント
tpl (String)
Dabten.Load()の第一引数のIDに対応するテンプレートID。
data (Object | String | null)
受信したテキストデータをJSON形式に変換したもの。
Dabten.GetFromURI()の第1引数に'text'を指定すると、nullとなります。
success (Boolean)
挿入に成功していればtrue、失敗していればfalse

---- サンプル ----

script

Dabten.InsertFromURI('elementID', 'dom', 'tplId', '/data.cgi');

type "text" に関して

第三引数に"text"を指定すると、受信したデータをそのまま第一引数のエレメントに挿入します。
この場合に限り、第二引数のテンプレートIDを省略できます。

script

Dabten.InsertFromURI('elementID', 'text', '', '/data.cgi');

このように書いた場合、以下のコードと同じになります。

document.getElementById('elementID').innerHTML=ajaxobj.responseText;
（XMLHttpRequestオブジェクト生成、'data/cgi'との送受信部分省略）