#Introduction

In this lab, you'll use a component model to hold the store config.

#Steps

??Look at network traffic 

Before doing anything, refresh the app and look at network traffic. Note the two 
calls to the earthquakes data feed. 

In this lab you'll refactor the code to put the store in a component model, 
and as a result you'll only only see one call.

??Modify the `model` block

At the start of the main container's config add a new block that 
configures the component model. 

<pre style="color:lightgray;">
    const config = {
        className: 'Earthquakes.view.MainView',

        model: {
            module: ViewModel,
            <span style="color:blue;">stores: {}</span>
        },
        items: [{
            module: EarthquakesTable,
        ...
</pre>

Then copy the store config to the component model's `stores` block.

<pre style="color:lightgray;">
    config = {
        className: 'Earthquakes.view.MainView',
        model: {
            module: ViewModel,
            <span style="color:blue;">stores: {
                earthquakes: {
                    module: Store,
                    model: {
                        fields: [{
                            name: 'humanReadableLocation'
                        }, {
                            name: 'size',
                            ntype: 'data-field-float',
                        }, {
                            name: 'timestamp',
                            type: 'Date'
                        }, {
                            name: 'title',
                            calculate: (data, field, item) => item.humanReadableLocation
                        }, {
                            name: 'position',
                            calculate: (data, field, item) => ({ lat: item.latitude, lng: item.longitude })
                        }]
                    },
                    url: 'https://apis.is/earthquake/is',
                    responseRoot: 'results',
                    autoLoad: true
                }
            },
        }</span>,
        items: [{
            module: EarthquakesTable,
    ...
</pre>

Save your changes.

At this point you have the same store config _two_ times: 
- In the component model's `stores` config
- In the grid's `store` config

If you refresh the browser and look at network traffic you'll see
_two_ calls to the `apis.is` web service.

??Add the binding to the table

In the main container, remove the `store` config from the table.
Then a new config for the table:

    bind: {
        store: 'stores.earthquakes'
    }

Refresh and verify that it's working. If you look at network traffic you should
see a single call to the `apis.is` web service.

??Refactor the model into its own class

**If you used the _create-app-training_ build script, you already have a view model
and can skip this step.**

IF you don't, define a new source file `MainViewModel.mjs` with this code.

<pre class="runnable text readonly">
import Base from '../../../node_modules/neo.mjs/src/model/Component.mjs';
import Store from '../../../node_modules/neo.mjs/src/data/Store.mjs';

class MainViewModel extends Base {
    static config = {
        className: 'Earthquakes.view.MainViewModel',
        data: {},
        stores: {}
    }
}

Neo.setupClass(MainViewModel);
export default MainViewModel;
</pre>

??Use the view model

**If you used the _create-app-training_ build script, you already have a view model
and can skip this step.**

In the main container, import the view model:

    import ViewModel from './MainContainerViewModel.mjs';

Then simply change the `model` config to use `module: ViewModel,`.
Leave the rest of the `model` config alone.

At this point you're creating an instance of the new view model, but it 
doesn't really have anything in it. The config from the main container 
is being applied to it, which means if you save and refresh, everything
should still work.

??Move the store config to view model

In the main container cut the `stores` config from the view model block, 
and paste that in the `MainContainerModel`, replacing the `stores` block there.

Refresh and everything should still work.

Note how much cleaner the main view is. Classes should be simple. Complexity
should be factored out by creating new classes. There should also be a clean
separation of concerns, where stores and other view model setup is done in
a view model class, the view should be a declarative description of the view,
and event handling should be done in a separate controller &mdash; which we'll talk about soon.
