CODEWITHSUNDEEP
ember.jsember-cli
uioporqwerty
uioporqwerty

Reputation: 317

Accessing Ember Controller Properties within the same controller

I'm very new to EmberJS 2.0 and trying to slowly understand it by building my own website with it. Anyways, I've managed to get Firebase integrated with Ember and my controller is able to authenticate correctly. However, I'd like to understand why when I execute:

this.send('toggleModal');

inside the authenticate action property function (.then()) it doesn't work but if I execute it outside then everything works fine.

1) Is the 'this' keyword getting confused with something other than the Ember controller?

Here is the sample:

// /app/controllers/application.js
import Ember from 'ember';

export default Ember.Controller.extend({
  isShowingModal: false,
  actions: {
    toggleModal: function() {
      this.toggleProperty('isShowingModal');
    },
    authenticate: function(username, pass) {
      this.get('session').open('firebase', {
        provider: "password",
        email: username,
        password: pass
      }).then(function (data) {
        console.log(data.currentUser);
        console.log(session.isAuthenticated); //Why is 'session' not defined?
        this.send('toggleModal'); //This doesn't work. Throws an error.
      });

      this.send('toggleModal'); //This works.
    },
    logOut: function() {
      this.get('session').close();
    }
  }
});

2) Also, I've noticed that when using Emberfire I'm able to use the property 'session.isAuthenticated' within the template application.hbs however, shouldn't 'session' be an object that is injected to all routes and controllers using Torii? Why is that property inaccessible/undefined within the application.js controller? I'm using https://www.firebase.com/docs/web/libraries/ember/guide.html#section-authentication as a reference.

3) In the guide above the actions for authentication are put inside the route. However, according to this quora post the route should only handle template rendering and model interfacing. Is this post incorrect? The authentication logic should reside in the application.js controller correct? https://www.quora.com/What-is-the-best-way-to-learn-Ember-js

Upvotes: 1

Views: 1045

Answers (2)

max
max

Reputation: 726

You're partially right about this although it's not really confused. this (where you're modal call doesn't work) isn't scoped to the Controller anymore, because it's inside a function. Either:

  1. replace the function (data) call with data => if you're using ember cli. Or
  2. var _self = this; up top and reference _self instead.

This should at least get you started.

Upvotes: 0

GJK
GJK

Reputation: 37369

1) Is the 'this' keyword getting confused with something other than the Ember controller?

Yes. This is one of the most common sticking points of Javascript. There's a lot of articles out there about it, but this one looked pretty good. To solve it you'll either need to use an arrow function, bind the function to the current context, or save the context in a local variable. (Read that article first though.)

2) Also, I've noticed that when using Emberfire I'm able to use the property 'session.isAuthenticated' within the template application.hbs however, shouldn't 'session' be an object that is injected to all routes and controllers using Torii? Why is that property inaccessible/undefined within the application.js controller? ...

That's because the template pulls the property from the current context (your controller). Inside of your controller you'll have to use this.get('session') instead. (After you fix the issue I mentioned above.)

3) ... Is this post incorrect? ...

I wouldn't say incorrect, just a bit oversimplified. I would follow whatever conventions the library uses as that's probably the best way given the library's requirements.

Upvotes: 2

Related Questions