Zusaarのページを更新しました

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

Oboe.js | JavaScript Samples | nqou.net

テンプレート

よく言われるフレームワークに、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 }}

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つだと思います。

テンプレート

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

参考になる資料