Jugl の examples をみながら使い方を試してみます。
Jugl Wiki ページ
http://dev.libjs.net/jugl/
にある通りダウンロードします。
nob61@debian:~$ svn co http://svn.libjs.net/jugl/trunk
bash: svn: command not found
と表示されたら、「Synaptic パッケージマネージャ」で
svn-buildpackage
をインストールします。
ダウンロードされた「trunk」を Eclipse にインポートします。
1 ファイル -> インポートをクリックします
2 選択ウィンドウで 一般 ->ファイル・システム を選択して「次へ」ボタンをクリックします。
3 ファイル・システムウィンドウで 次のディレクトリからの「参照」ボタンをクリックします。
4 ディレクトリからインポートした trunk フォルダを選んで「OK」ボタンをクリックします。
5 ファイル・システムウィンドウで trunk をチェックして「完了」ボタンをクリックします。
lib.js: Jugl ホームページ
http://libjs.net/projects/jugl/
の online docs の最初のページ The Basics で基本的な使い方をやってみます。
*** サイトから ***
Juglは、HTMLまたはXMLテンプレートを処理するため、そしてJavaScriptの環境に基づいてドキュメントを構築するために使用するJavaScriptライブラリです。
Juglは、ドキュメントを動的に作成できるテンプレート言語をサポートします。
*** ここまで ***
The Basics の例をみてください。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Jugl Test</title>
<script src="./trunk/build/jugl.js"></script>
</head>
<body>
<h2>Basics</h2>
<!-- 基本的な Jugl template のマークアップ1 -->
<p id="template_id" jugl:content="greeting">
This content will be substituted with the value of the "greeting" variable.
</p>
<!-- 処理コード1 -->
<script type="text/javascript">
var greeting = "Hello World!";
var template = new jugl.Template("template_id");
template.process();
</script>
</body>
</html>
次の部分は、Jugl テンプレートのマークアップ（HTML）です。
<p id="template_id" jugl:content="greeting">
This content will be substituted with the value of the "greeting" variable.
</p>
テンプレートを処理するために、次のコードを実行します。
var greeting = "Hello World!";
var template = new jugl.Template("template_id");
template.process();
最初の行は、任意の値 "Hello World！" を greeting オブジェクトに設定しています。
2行目は、template_id によって識別されるマークアップに新しいテンプレートを作成します。
3行目はにテンプレートを適切に処理します。（すべてのJuglの属性は処理され、元のマークが変更されます）
テンプレートの処理をした後は、マークアップは次のようになります：
<p id="template_id">Hello World!</p>
実際に実行してみるとわかりやすいと思います。
getElementById メソッドと同じ様な動作になります。
jugl：content属性は、何も有用なものを提供していません。
jugl：content属性の値は、単純な変数です。
追加の属性を使用することでより複雑なテンプレートの作成ができます。
0 件のコメント:
コメントを投稿