Dabten Usage : JSONP (methods)

UP PREV NEXT

Dabten.InsertJSONP(elm, tpl, uri, cbkey, post, callback)

JSONPによるテンプレートへのデータ反映を行います。

--- 戻り値 ---

挿入した<script>エレメント

---- 引数 ----

elem (String | HTML-DOM-Element | null)
データを挿入するHTMLエレメントのID、またはエレメント自身。
指定されていると受信したデータ(引数)をテンプレートに反映し、Dabten.InsertDOMを使用して挿入します。
Dabten.InsertDOM()のaddオプションはfalseです。
tpl (String)
テンプレートID。
該当するテンプレートが存在しなければ、HTMLデータの作成は行いません。
uri (String)
データ受信のためのCGIスクリプトのURI
cbkey (String)
JSONPを提供しているサーバーが指定する、コールバック関数の名前。
一般的には "callback"
post (Object | String)
サーバーに送信するデータ
callback (Function)
JSONPデータを受け取ってあと、呼び出す関数
elem、tplの両方が指定されていると、データをドキュメントに挿入した後に呼び出します。

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

UP PREV NEXT

function callback(elm, tpl, data)

Dabten.InsertJSONP()の第6引数に指定するコールバック関数
Dabtenでは用意していませんので、JSONPサーバーに併せて作成してください。
JSONPデータを受信した後、引数とともに呼び出します。

---- 引数 ----

elem (String | HTML-DOM-Element | null)
Dabten.InsertJSONP()呼び出し時の第一引数のエレメントオブジェクト。
tpl (String)
テンプレートID。 Dabten.InsertJSONP()の第二引数と同等。
data (Object)
JSONPサーバーから送られて来たデータ

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

var url='https://www.example.com/jsonp/serve.cgi';
var data={account: 'dabten', page: 5};
Dabten.InsertJSONP(null, '', url, 'callback', data, MyFunc);

function MyFunc(elem, tpl, data){
 Dabten.InsertHTML(elem, tpl, data);
}

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

var url='https://www.example.com/jsonp/serve.cgi';
var data={account: 'dabten', page: 5};
Dabten.InsertJSONP(null, '', url, 'callback', data, function(elem, tpl, data){
 Dabten.InsertHTML(elem, tpl, data);
});

UP PREV NEXT

InsertJSONP supported data type

Dabten.InsertJSONP()で受け取るデータで、Dabtenがサポートしているデータタイプです
Dabtenは以下のデータをサポートしています。

  • Object (JSON)
  • 配列

配列データは {tpl:index}, {tpl:value}を使用して、インデックスと値をテンプレートに反映できます。
JSONデータの中に配列が含まれている場合、{index:'', value:''}の配列に変換されます。
配列の中のオブジェクトは動作保証外です。

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

var url='https://www.example.com/jsonp/getfruits.cgi';
var data={account: 'dabten', page: 5};
Dabten.InsertJSONP(element, 'templateID', url, 'callback', data);
挿入されるスクリプト
MyFunc([apple, orange, maloon]);
テンプレート
<ul>
{tpl::repeat}
<li>No.{tpl:index} : {tpl:value}</li>
{tpl::endrepeat}
</ul>
生成されるHTML
<ul>
<li>No.1 : apple</li>
<li>No.2 : orange</li>
<li>No.3 : maloon</li>
</ul>

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

var url='https://www.example.com/jsonp/getfruits.cgi';
var data={account: 'dabten', page: 5};
Dabten.InsertJSONP(element, 'templateID', url, 'callback', data);
挿入されるスクリプト
MyFunc({title:'Fruits', fruit:[apple, orange, maloon]});
テンプレート
<h3>{tpl:title}</h3>
<ul>
{tpl::repeat=fruit}
<li>No.{tpl:index} : {tpl:value}</li>
{tpl::endrepeat}
</ul>
生成されるHTML
<h3>Fruits</h3>
<ul>
<li>No.1 : apple</li>
<li>No.2 : orange</li>
<li>No.3 : strawberry</li>
</ul>