@nqounetです。

Zusaarのページというか、Oboe.jsのサンプルページがあまりにも手抜きすぎたので、整形済みテキストではなくHTMLで書くようにしました。

テンプレート

よく言われるフレームワークに、MVCフレームワークというのがあります。

Model, View, Controllerというものをそれぞれ独立させることで、開発を容易に行えるようにするものです。

協業する際に、Viewの部分をデザイナーさんに任せられると楽だなぁ、と思いながらよく使うのですが、まあ、なかなかそんな方はいません。

例えば、jQueryで新しいリストを追加する時にこんなことしていたら大変ですよ。

1
2
3
4
5
6
7
var text = 'hoge';
var $el =
$('<ul/>').append(
$('<li/>').append(
$('<p/>').html(text)
)
);

HTMLの中にパラメータを入れると、生成されるHTMLが想像しやすいですね。

1
2
3
4
5
<ul>
<li>
<p>hoge</p>
</li>
</ul>

実際に、リストで追加したい場合は、複数の要素があるのが普通ですので、liの部分をテンプレートにしておくと結構楽です。

このようなテンプレート機能を持つシンプルなライブラリとしてMustacheがあります。

Mustacheを使ってリストの要素のテンプレートを使ったスクリプトを書くとこんな感じです。

1
2
3
var $ul = $('<ul/>');
var $li = Mustache.render('<li><p>{{text}}</p></li>', {text: 'hoge'});
$ul.append($li);

リストを増やしたい場合は、render部分をループに入れておく、という方法があります。

Mustacheでも配列を操作できます。例えば、以下の様な構造のデータがあったとした場合です。

1
2
3
4
5
6
7
8
9
10
11
{
list: [{
text: 'hoge1'
}, {
text: 'hoge2'
}, {
text: 'hoge3'
}, {
text: 'hoge4'
}]
}

listは、textというプロパティを持った配列です。

これをリスト形式で表示するには、以下の様なテンプレートを用います。

1
2
3
4
5
6
{{#list}}
<ul>
<li><p>{{text}}</p></li>
</ul>
{{/list}}
{{^list}}<p>値はありません</p>{{/list}}

値がなかった時は、リストではなく段落で表示したりすることもできますよ。

Oboe.jsはループの中身の処理を書く

Oboe.jsは、nodeイベントがあるお陰で、通常のJSON解析後、ループで処理する部分で処理が可能になります。

普通の配列(例えばevents)を処理する場合は以下のようになるでしょう。

1
2
3
events.forEach(function(value){
$html.append(Mustache.render(template, value));
});

Oboe.jsの場合は以下のようになるでしょう

1
2
3
4
Oboe(url)
.node('events.*', function(value){
$html.append(Mustache.render(template, value));
});

どちらも同じ関数で処理ができますね。

ループの中身は簡単にイメージできると思うので、それと同じように書けるのも利点の1つだと思います。

参考になる資料