ember.js 1.10 で HTMLBarsのhelper定義方法 #Ember.js

ember.jsが1.10に上がってHandlebarsからHTMLBarsにテンプレートエンジンが変わりました。

~~Handlebarsで定義していたhelperが軒並みエラーしてたので書き直しが必要です。~~

※2015年3月9日追記：どうやらwindow.Handlebarsのundefined errorを勘違いしていたようです。

Handlebarsのhelper

Ember.Handlebars.helper('yen', function(amount) {
  var result = '&yen;' + Handlebars.Utils.escapeExpression(amount);
  return new Ember.Handlebars.SafeString(result);
})

HTMLBarsのhelper

window.App.YenFormatHelper = Ember.HTMLBars.makeBoundHelper(function(params, hash, options, env) {
  var amount = Ember.Handlebars.Utils.escapeExpression(params[0]);
  var result = '<span>&yen;' + amount + '</span>';
  return result.htmlSafe();
})

変更点

helper名にハイフンが必須になった
- 上記の例でyenのままだとエラーするのでx-yen等で回避する必要がある
ApplicationのプロパティにXxxYyyHelperと定義する
引数はparamsかhashに格納される
- {{yen-format 0}}と渡すとparamsに[0]が格納される
- {{yen-format amount=0}}と渡すとhashに{amount: 0}が格納される
引数のoptionsとenvの使い道はまだ調べてません
html文字列はString.prototype.htmlSafeを使ってエスケープを回避する
- これはHandlebars.SafeStringを返すみたいだけど前からあったメソッド？
- でも入力値もエスケープ回避されてしまうので、危険なデータには Ember.Handlebars.Utils.escapeExpression を使う

しかしEmber.Handlebars.Utils.escapeExpressionて長いなぁ…