At Ember, what is the difference between this and this. Controller

Question

I am trying to create a simple Ember application that collects information from a form. I use this tutorial as a guide. In the tutorial, it has the following code for capturing 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 some 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 decision, I could not get this to work. this.get ('whatever') always displayed as "undefined" in my code. After a little debugging, I was able to find a solution, but that 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

The template context will be the controller. model route Hook return data will be set by default in the model control property via setupController . You can access the controller in this.controller route this.controller .

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

Answer 2

He did not update the textbook. Ideally, you can access as this.get('city') or this.get('owner') only if you pass the values ​​to the component. Something like below.

 {{new-rental city=city owner=owner}} 

If you do not pass values ​​to a component that you cannot access as this.get('city') , you can access as this.controller.get('city') , which happens in your case. Try passing values ​​to the component if you want to access them directly.