Ember.js データバインディング機能付きのカスタムヘルパの作り方

先日カスタムヘルパの作り方を説明したんですが、書いてる時に気づいたことがあって、

「あれ、カスタムヘルパってデータバインディング使えなくね？」

と。
でもまあEmber.jsだし、中でうまいことやってるんじゃないか、と根拠無く考えてたんですが、先日 データバインディング機能付きのカスタムヘルパ作成メソッドがPull Request取り込まれてました。これ使えばデータバインディング機能付きのカスタムヘルパを作れます。

1.0.0-pre.2ではまだ使えないのですが、次のリリースでは使えるようになっていると思います。

以下、カスタムヘルパの実装方法です。

Ember.Handlebars.registerBoundHelper('highlight', ((value) ->
  return new Handlebars.SafeString('<span class="highlight">' + value + '</span>')
))

先日は Handlebars.registerHelperを使ったんですが、Ember.Handlebars.registerBoundHelperは、コールバック関数の引数が違うみたいなので注意してください。

以下のように使います。

{{highlight name}}

このカスタムヘルパは、nameの値が更新されると、表示も自動で更新されます。

<span class="highlight">Peter</span>

Ember.Handlebars.registerBoundHelper便利！