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

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 = '¥' + 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て長いなぁ…