Instantiation and Binding

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

Explicitly

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

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

fw.applyBindings(new MyViewModel());

Using a Declarative Element

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

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

fw.viewModel.register('MyViewModel', MyViewModel);
fw.start();

Note

• There are a few ways to register your viewModel so that you can use it declaratively, see: ViewModel Registration.

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

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

Using a Component

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 MyViewModel () {
  var self = fw.viewModel.boot(this, {
    namespace: 'MyViewModel'
  });
  self.myName = 'Smith';
}

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

For more information, see component basics and component registration.

Note

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

Tools

fw.viewModel.get()

For debugging purposes you might need to get direct access to one or more of the viewModel instances your application has created. If you use a declarative element or component to instantiate your viewModel 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 viewModel via the fw.viewModel.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 viewModels...these can be instantiated explicitly or declaratively, as long as they are bootstrapped as a viewModel then this method can retrieve them. For purposes of this example, they are instantiated explicitly:

function MyViewModel () {
  fw.viewModel.boot(this, { namespace: 'MyViewModel' });
}
new MyViewModel();
new MyViewModel();

function MyOtherViewModel () {
  fw.viewModel.boot(this, { namespace: 'MyOtherViewModel' });
}
new MyOtherViewModel();

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

// get all instantiated viewModels grouped by namespace
var allViewModels = fw.viewModel.get();

// get reference to all the instantiated MyViewModel
var myViewModels = fw.viewModel.get('MyViewModel');

// get reference to the one instantiated MyOtherViewModel
var myOtherViewModel = fw.viewModel.get('MyOtherViewModel');

// get reference to a list of viewModels grouped by namespace
var viewModels = fw.viewModel.get(['MyViewModel', 'MyOtherViewModel']);