#Introduction

In this lab you'll have the filter container fire
_cityChange_ and _categoryChange_ events.

#Steps

??Fire _cityChange_

We need to fire an event when city changes. 

Within the `Filter` class, how do we know when that property has changed? Via the `afterSetCity()` method.

What information should we pass when firing the event? When you design your own classes
it's up to you. The question is: what would be useful to the listener? In a change event 
you'd typically send three three things:
    - The component firing the event
    - The new value
    - The old value

Edit `yelp/src/view/businesses/Filter.mjs` and modify the `afterSetCity()` method to have
a second param &mdash; the old value. Then add a statement to fire an event.

    afterSetCity(city, oldCity) {
        console.log(city);
        if (!this.rendered) return;
        this.getReference('city').value = city;
        this.fire('cityChange', {
            component: this,
            city,
            oldCity
        });
    }

??Test the event in the debugger

You can procedurally add an event handler via the `on()` method.

Use the Chrome console to add a listener. 

    Neo.findFirst({ntype:'yelp-filter'}).on('cityChange', data=>console.log('listener', data))

Then enter a city in the text field. After a moment you should see your log message.

??Have the main view listen for the change

Now that you know your event is getting fired, edit the main view and add a listener there.

<pre style="border: thin solid gray; padding: 8px; color: lightgray;">
headers: [{
    module: Banner,
    dock: 'top',
}, {
    dock: 'top',
    module: Filter,
    <span style="color:#b91010;">listeners: {
        cityChange: data => console.log(data)
    }</span>
}, {
    dock: 'right',
    html: 'details',
    width: 300
}],
</pre>

??Test the main view listener

When you run your app and enter a city you should see its value being logged from the main view.

<img src="https://s3.amazonaws.com/mjs.neo.learning.images/yelp/OnCityChangeEvent.png"></pre>

??Fire _categoryChange_

Now do the same thing for category. 

- Fire the event from `Yelp.view.businesses.Filter#afterSetCategory'
- Test it
- Add the listener in the main view

When you're finished, you should see both city and category changes being logged
from the main view.