Update model hook value after button click and taking new value from input text

1

Newcomer here,

async model() {

let response = await fetch('http://api.openweathermap.org/data/2.5/weather?q=London&units=metric&appid=[APIKeyPlaceholder]);

var data = await response.json();

return data;

}

I am using openweathermap api to get current weather data and passing city argument in the api.

I am taking this ‘data’ value and displaying it on .hbs file. Now I have added an input text field and button for entering city name. How do I update the city name and model hook value(i.e data value is updated return from api fetch command) with the new value I take from .hbs file ?

Do I use controller? How do I bind input to ember variable?

2

Hi @dicey, welcome to Ember!

In short you want to do the following:

  1. bind the city name input to a value on the controller (which of course means you should define a controller)
  2. bind the controller city name value to a query param
  3. add the query param to your route so the model hook re-fires when the query param changes

I’d suggest reading over a few pages in the guides:

  1. component state and actions (since you’re working with a controller you can skip over all the stuff about “args” for now and just focus on the state which works the same way with a controller) and the input component which covers Ember’s built-in input component. I should note that the built-in component uses “two way binding” instead of “data down actions up” (a one way data flow) so if you want to use a native html input you can do that too
  2. specifying query params (setting up a query param binding on your controller)
  3. opting into a full transition (basically adding the query param to the router to make it update when the query param changes)