In Ember, what is the difference between this and this.controller

Question

I'm attempting to build a simple Ember application that collects information from a form. I'm using this tutorial as a guide. In the tutorial it has the following code to grab information from a form:

export default Ember.Component.extend({
  ...
  actions: {
    saveRental1() {
      var params = {
        owner: this.get('owner'),
        city: this.get('city'),
        type: this.get('type'),
        image: this.get('image'),
        bedrooms: this.get('bedrooms'),
      };
      ...
      this.sendAction('saveRental2', params);
    }
  }
});

here is a bit of the relevant form code:

      <div class="form-group">
        <label for="image">Image URL</label>
        {{input value=image id="image"}}
      </div>

      <button {{action 'saveRental1'}}>Save</button>
    </form>

In my solution I could not get this to work. this.get('whatever') always showed up as 'undefined' in my code. After a bit of debugging I was able to find a solution, but it meant changing my code from this.get('city') to this.controller.get('city')

Can someone explain what I'm doing wrong or why? Is it 'standard' to use this.controller?

Answer 1

Template context will be the controller. Route model hook return data will be set in controller model property through setupController by default. You can access the controller in route thorugh this.controller.

If you are using this inside the component it will refer to component instance, in your case, if you got the city property in component, then you can access it using this.get('city') in component.