//NotificationQueueを使って更新する場合。定期的にテキストが更新される
Notifications.TileUpdateManager.createTileUpdaterForApplication().enableNotificationQueue(true);
var tileUpdateManager = Notifications.TileUpdateManager;

var data = Data.groups.dataSource.list._groupKeys;

for (var i = 0, len = data.length; i < len; i++) {
    var template = tileUpdateManager.getTemplateContent(Notifications.TileTemplateType.tileSquareText03);
    var tileAttribute = template.getElementsByTagName('text')[0];
    tileAttribute.appendChild(template.createTextNode(data[i]));
    var tileNotification = new Notifications.TileNotification(template);
    tileUpdateManager.createTileUpdaterForApplication().update(tileNotification);
}

2014-12-03

Handlebarsメモ

JavaScript

HandlebarsはMustacheをベースに開発されたテンプレートエンジンです。細かい使用方法は公式サイトで詳しく説明されています。

http://handlebarsjs.com/

少し試している中でif文での比較を行いたい部分があったのですがどうやらデフォルトではサポートしていないみたい。

具体的には、

{{#if length == 0}} No length {{else}} length exist {{/if}}

みたいに書きたかったのですがだめでした。

調べてみるとやはりサポートしていないようでBlock Helperを自分で定義する必要があるみたい。元から用意されているビルドインヘルパーの#ifは単純に値が存在するかしか見てくれない様子。まあViewにごちゃごちゃとコードを書かないでViewとロジックを分離させようという方針のものなので自然なことかと思いました。

このことについてはここで議論されていました。

if-block needs value to compare

ということで比較ヘルパーを定義します。ここで同じ事を行なっている人がいたので使わせてもらいました。

Comparison block helper for handlebars templates

例えばequalという名前のヘルパーを登録するときは以下のように行います。ヘルパーの登録方法についても公式ページにきちんと書いてあります。

Handlebars.registerHelper('equal', function(lvalue, rvalue, options) {
    //処理
});

これにより、以下のように書けるようになります。

{{#equal length 0}} No length {{else}} length exist {{/equal}}

ちょうどBackbone.jsのTodoアプリのサンプルでこれを使える部分があったので使ってみました。BackboneのTodoアプリサンプルはunderscore.jsのテンプレート(_.template)を使っているのですが、これをHandlebarsを使うように置き換えています。

backbone_handlebarsSample

ヘルパー部分は分かりやすいようにhandlebars-helper.jsと分けています。