# Instantiation and Binding

A `dataModel` can be instantiated and bound to the DOM in 3 different ways:

### Explicitly

    <span data-bind="text: myName"></span>

    function MyDataModel () {
      var self = fw.dataModel.boot(this, {
        namespace: 'MyDataModel'
      });
      self.myName = 'Smith';
    }

    fw.applyBindings(new MyDataModel());

### Using a Declarative Element

    <dataModel module="MyDataModel">
      <span data-bind="text: myName"></span>
    </dataModel>

    function MyDataModel () {
      var self = fw.dataModel.boot(this, {
        namespace: 'MyDataModel'
      });
      self.myName = 'Smith';
    }

    fw.dataModel.register('MyDataModel', MyDataModel);
    fw.start();

Note

- There are a few ways to register your dataModel so that you can use it declaratively, see: DataModel Registration.

- You can alternatively use `data-module` if you want to stick with fully valid HTML.

      <dataModel data-module="MyDataModel">
        <span data-bind="text: myName"></span>
      </dataModel>

### Using a Component

Since a dataModel is actually a view model (but with extra features) you can use it as the `viewModel` in a component configuration and then instantiate/bind it like any other component:

    <my-component></my-component>

Component Binding

You can of course also use the component binding in addition to a custom element as shown.

    function MyDataModel () {
      var self = fw.dataModel.boot(this, {
        namespace: 'MyDataModel'
      });
      self.myName = 'Smith';
    }

    fw.components.register('my-component', {
      dataModel: MyDataModel,
      template: '<span data-bind="text: myName"></span>'
    });
    fw.start();

For more information, see component basics and component registration.

Note

If using a `dataModel` in a component then you do not need to register it separately as a `dataModel`, it is loaded via its component configuration when used in this manner.

## Tools

### fw.dataModel.get()

For debugging purposes you might need to get direct access to one or more of the `dataModel` instances your application has created. If you use a declarative element or component to instantiate your `dataModel` then you aren't explicitly creating them yourself...how do you get access to them?

Footwork provides an easy way to get access to any bootstrapped `dataModel` via the `fw.dataModel.get()` method. There are several ways to call it depending on what you need.

Warning

You should only use this method for debugging purposes, for anything else you should preferentially use namespace-based communication or broadcastables / receivables to synchronize state/data.

Using this outside of a debugging context risks creating unnecessary coupling and poor cohesion within your application.

For example, lets first instatiate some `dataModels`...these can be instantiated explicitly or declaratively, as long as they are bootstrapped as a `dataModel` then this method can retrieve them. For purposes of this example, they are instantiated explicitly:

    function MyDataModel () {
      fw.dataModel.boot(this, { namespace: 'MyDataModel' });
    }
    new MyDataModel();
    new MyDataModel();

    function MyOtherDataModel () {
      fw.dataModel.boot(this, { namespace: 'MyOtherDataModel' });
    }
    new MyOtherDataModel();

Next we can use `fw.dataModel.get()` to retrieve them at any time later:

    // get all instantiated dataModels grouped by namespace
    var allDataModels = fw.dataModel.get();

    // get reference to all the instantiated MyDataModel
    var myDataModels = fw.dataModel.get('MyDataModel');

    // get reference to the one instantiated MyOtherDataModel
    var myOtherDataModel = fw.dataModel.get('MyOtherDataModel');

    // get reference to a list of dataModels grouped by namespace
    var dataModels = fw.dataModel.get(['MyDataModel', 'MyOtherDataModel']);