.bind in route not working for phantomjs, and not shimmable


#1

Phantomjs doesn’t support .bind, which is a known missing feature in phantomjs. I’m using .bind in a route, and the acceptance test for that route fails in phantomjs because it doesn’t know .bind. Which all makes sense.

TypeError: session.save(...).then(...).bind is not a function@ 429 msSource: http://localhost:4200/assets/my-app.js:2605

However, the currently available shims don’t seem to work here. I’ve tried using ember-cli-es5-shim, which doesn’t make a difference in the reported errors. I’ve also tried directly importing the es5-shim library (installed with bower) in my Brocfile.js with app.import. This also doesn’t make any difference, the errors remain.

Does anyone know why this isn’t working?


#2

You’re probably calling bind on the wrong object. Try calling it on a function:

session.save().then( function (newSession) {...}.bind(this) );

#3

You’re right. I was using it in the wrong place. The other error, the one that I was originally trying to reproduce here, was solved by using es6 fat arrow function notation (which automatically inherits the this scope of the parent).

So originally we were doing this in our route:

actions: {
  login: function(session) {
    session.save()
      .then(function(data) {
        // use of parent this
        this.transitionTo('somewhere-else');
      }.bind(this)
  }
}

For which the test failed in phantomjs. Doing this solved it:

  actions: {
    login(session) {
      session.save()
        .then((data) => {
          // use of parent this
          this.transitionTo('somewhere-else');
        })
  }
}

Which works because babel transpiles the fat arrow notation using var _this = this. So this looks like it’s the most future-proof way to solve it.