dojo［dijit/_Templated］を使ってHTMLテンプレートを作成②

dojo［dijit/_Templated］を使ってHTMLテンプレートを作成①に引き続き、dojoのツールキットを使ってHTMLテンプレートを作成する方法についてまとめます。

javascript

dojo.require("dijit._Widget");
dojo.require("dijit._Templated");

dojo.declare("test",[dijit._Widget , dijit._Templated],{
　//変数名:"",
 divID:"",
 divClass:"",
 templateString:"<div id="${divId}" class="${divClass}">サンプル</div>\n",
});

このサンプルでは、[divID][divClass]という変数をhtmlに渡してみます。

htmlはこのように書いて、変数に値をセットします。

<div dojoType="test" divID="red" divClass="bold"></div>

cssを書いてみます。

#red{
 width:300px;
 height:300px;
 text-align:center;
}
.bold{
 font-weight:bold;
}

これを画面上に出力すると、赤い四角の中に太文字で「サンプル」と表示されます。
これだけだとまったく恩恵が無いですが、フォーム部品などを動的に生成したい場合などに力を発揮するモジュールです。