App Cloud での JavaScript のテンプレート・システムの使用方法

このブログは、米国本社のアダム・マーク氏が開発したテンプレート・システムである Markup.js の紹介をしています。

典型的なウェブアプリケーションでは、ウェブサーバが HTML コードをクライアントに送る前に、編集する仕事を担っています。この作業は PHP、Java、や Ruby などで可能となります。

App Cloud のアプリ内では、HTML の編集作業は JavaScript を利用して、クライアント内で達成できます。例えば、ブログのリストを掲載する際には、次のようなコードを実装します。

var html = "<ul>";
for (var i = 0; i < results.length; i++) {
    html += "<li><b>" + results[i].title.toUpperCase() + ":</b> "
            + results[i].description + "</li>";
}
html += "</ul>";

このコードは読みにくいですが、テンプレートなどを利用することで、HTML コードをコンパイルできます。必要になるものは、テンプレート (String) と コンテキスト (JavaScripit オブジェクト)の2点となります。次のようなコードを試してみましょう。

<ul>
    {{results}}
        <li><b>{{title|upcase}}:</b> {{description}}</li>
    {{/results}}
</ul>

簡単に読めるのではないでしょうか。明らかに、実装しやすいと思います。 JavaScript のテンプレート・システムは他にもいろいろあり、Mustache、jQuery Template、そして本ブログで紹介する Markup.js があります。 上で紹介したコードは Markup.js に関する例となります。では、どのようにテンプレート内にコンテキスト(データ)を埋め込むのでしょうか。

var context = {
    name: {
        first: "Akira",
        last: "Tanaka"
    }
};
var template = "Hi, {{name.first}}!";
var result = Mark.up(template, context); // "Hi, Akira!"

結果として返される値 ("Hi, Akira!") は HTML ドキュメント内に埋め込まれます。

App Cloud アプリ内では、コンテキスト(データ)はコンテンツ・フィードを利用する場合が多いです。例えば、

bc.core.getData("blog",
    function (data) {
        // successCallback 関数
        var template = bc.template["detail-template"]; // detail-template は xxxx.txt file に定義されています
        var context = {results: data};
        var markup = Mark.up(template, context);
        $("#blog-results").html(markup); // document.getElementById("blog-results").innertHTML = markup; と同じ
    },
    function (error) {
        // errorCallback 関数
        bc.device.alert("Oops! " + error.errorMessage);
    }
);

bc.core.getData に関しては、下記リファレンスをご参照下さい:

http://docs.brightcove.com/en/app-cloud-api/core/symbols/bc.core.html#.getData

Markup.js は制御論理 (if や else) 、ループ や "pipes" (上記の、title を upcase関数でUpperCase にするなど)などを使用することができます。

Markup.js に関する詳細(英語)は下記をご参考にして下さい:

https://github.com/adammark/Markup.js

【参考資料】
http://www.adammark.net/2012/01/15/using-a-javascript-template-system-in-app-cloud/