Some trouble with Helpers in Ember 1.10+, HTMLBars

1-overview.md

I'm having trouble with Ember.HTMLBars.makeBoundHelper. I ran ember g helper format-date, which emitted app/helpers/format-date.js (see below). Note that it uses Ember.HTMLBars.makeBoundHelper. The helper function expects a Date and a format String.

When I render the template (see below), the helper receives instead

1. an Array of the form [ Sat Feb 28 2015 16:00:00 GMT-0800 (PST), "MMMM YYYY" ]
2. an empty Object
3. an Object of the form { morph: Morph }
4. an Object of the form { data: Object, dom: DOMHelper, helpers, Object, hooks: Object, useFragmentCache: true: view: undefined }

If I change Ember.HTMLBars.makeBoundHelper to Ember.Handlebars.makeBoundHelper, the helper function receives

1. a Date
2. "MMMM YYYY"

Tracing the call stack back a bit, I hit https://github.com/emberjs/ember.js/blob/v1.11.0/packages/ember-htmlbars/lib/system/make_bound_helper.js#L70, with fn === formatDate

2-bower.json

{
  "name": "tango",
  "dependencies": {
    "jquery": "^1.11.1",
    "ember": "v1.11.0",
    "ember-data": "1.0.0-beta.16.1",
    "ember-resolver": "~0.1.15",
    "loader.js": "ember-cli/loader.js#3.2.0",
    "ember-cli-shims": "ember-cli/ember-cli-shims#0.0.3",
    "ember-cli-test-loader": "ember-cli-test-loader#0.1.3",
    "ember-load-initializers": "ember-cli/ember-load-initializers#0.0.2",
    "ember-qunit": "0.3.0",
    "ember-qunit-notifications": "0.0.7",
    "moment": "~2.9.0",
    "moment-timezone": "~0.3.1",
    "qunit": "~1.17.1",
    "sinon": "http://sinonjs.org/releases/sinon-1.12.2.js"
  }
}

3-package.json

{
  "name": "tango",
  "version": "0.0.0",
  "description": "Fastly Configuration UI",
  "private": true,
  "directories": {
    "doc": "doc",
    "test": "tests"
  },
  "scripts": {
    "start": "ember server",
    "build": "ember build",
    "test": "ember test"
  },
  "repository": {
    "type": "git",
    "url": "git://github.com/fastly/Tango.git"
  },
  "engines": {
    "node": ">= 0.10.0"
  },
  "author": "Fastly Developers <support@fastly.com>",
  "devDependencies": {
    "bower": "^1.3.12",
    "broccoli-asset-rev": "^2.0.2",
    "ember-cli": "0.2.2",
    "ember-cli-app-version": "0.3.3",
    "ember-cli-babel": "^4.0.0",
    "ember-cli-compass-compiler": "0.0.18",
    "ember-cli-content-security-policy": "0.4.0",
    "ember-cli-dependency-checker": "0.0.8",
    "ember-cli-htmlbars": "0.7.4",
    "ember-cli-ic-ajax": "0.1.1",
    "ember-cli-inject-live-reload": "^1.3.0",
    "ember-cli-qunit": "0.3.9",
    "ember-cli-uglify": "1.0.1",
    "ember-data": "1.0.0-beta.16.1",
    "ember-export-application-global": "^1.0.2",
    "ember-sinon": "0.0.3",
    "ember-watson": "^0.2.0"
  }
}

4-format-date.js

// in app/helpers/format-date.js

import Ember from "ember";

export function formatDate(date, format) {
  const m = moment.utc(date);
  return m.isValid() ? m.format(format) : "--";
}

export default Ember.HTMLBars.makeBoundHelper(formatDate);

5-some-template.hbs

{{format-date model.startTime "MMMM YYYY"}}

6-environment.js

// in config/environment.js

module.exports = function(environment) {
  var ENV = {
    // ...
    EmberENV: {
      FEATURES: {
        'ember-htmlbars': true
      }
    }
  };
  // ...
};

Even if you say that helpers registered with Ember.HTMLBars.makeBoundHelper are supposed to take a single argument and an optional hash, there's still the Array problem. That is, if I change the helper to

function formatDate(date, options) {
  const m = moment.utc(date);
  return m.isValid() ? m.format(options.format) : "--";
}

and the call to

{{format-date model.startTime format="MMMM YYYY"}}

then date would be [ Sat Feb 28 2015 16:00:00 GMT-0800 (PST) ], which isn't right.

Did you ever find a solution to this?

I was also stuck like James, his issue led me to this gist.

I'm trying to spike something, so I've left a big TODO warning for myself, but I made the last example 'work' by altering the extraction; it's far from pretty and will be tedious to apply to all helpers:

function formatDate(args, options) {
  const m = moment.utc(args[0]);

...it works, till we discover 'how'.