-->
./
<!-- フラ&#65533;ュが見れな&#65533;のためにここに何か書&#65533; --> フラ&#65533;ュがインス&#65533;&#65533;ルされて&#65533;&#65533;たいで&#65533;&#65533;&#65533;

2010年03月23日

文字列テンプレート

prototype.js v1.5.0 の使い方
アプリケーション中での JavaScript コードの量が増えるにつれ、同じタイプのオブジェクトの集合を書式化して表示する機会も増えるのではないでしょうか。

オブジェクトのリストをループで回し、オブジェクトのプロパティに基づいて定型の書式化文字列にあてはめる、というコードは珍しいものではないでしょう。 prototype.js はまさにこのような事例を手助けしてくれる Template クラス を提供しています。

以下の例では、ショッピングカート内の商品を書式化し、複数にわたる HTML 行として列挙するものです。

 参考にさせていただきました。DOM要素の書き換えでは出来るだけコード量を減らしたいと考えていました。タグの生成にも使えそうです。
 こんな感じで試してみました。

ソースコード:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html> <head>
<title>js test</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />

  <script  type="text/javascript" src="/home/hirono-hideki-01/f8-git-works/rails_indictment/public/javascripts/prototype.js"></script>

</head>

<body>
<h1>JavaScript</h1>
<script>
function insertTmp(){

    var data = new Object();
    data.items = [ ];
    //putting some sample items in the data
    data.items.push({name: '麻婆豆腐', price: 7000, type: 'href="http://www.google.ne.jp/"'});
    data.items.push({name: '天ぷら', price: 544, type: '\'フランス\''});
    data.items.push({name: '卵焼き', price: 10000, type: '&lt;ロシア&gt;'});

    var itemFormat = new Template(
            'これは #{type}語のページではありません。 ' +
            'よろしければ#{name}料理を#{price}円でお願いします。'
            );
    var formatted = '';

    for(var i=0; i<data.items.length; i++){
        var dataItem = data.items[i];
        formatted += "prototype.jsのバージョン" + Prototype.Version + "で実行。<br />"
+ itemFormat.evaluate(dataItem) + '<br/>\n';
    }

    $('insert').innerHTML=formatted;

}
</script>

<button onclick="insertTmp();">Click</button><br />

<div id='insert'>insert</div>


<hr>
<address></address>
<!-- hhmts start -->
Last modified: Tue Mar 23 01:31:51 JST 2010
<!-- hhmts end -->
</body> </html>


ブラウザの表示:

JavaScript


prototype.jsのバージョン1.6.1で実行。
これは href="http://www.google.ne.jp/"語のページではありません。 よろしければ麻婆豆腐料理を7000円でお願いします。
prototype.jsのバージョン1.6.1で実行。
これは 'フランス'語のページではありません。 よろしければ天ぷら料理を544円でお願いします。
prototype.jsのバージョン1.6.1で実行。
これは <ロシア>語のページではありません。 よろしければ卵焼き料理を10000円でお願いします。

Last modified: Tue Mar 23 01:31:51 JST 2010

posted by hirono at 01:34| Comment(0) | TrackBack(0) | prototype.js
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/36611006

この記事へのトラックバック