ViewModel Registration¶

In order to use a viewModel declaratively Footwork needs to know where to locate it. There are two standard ways to register your viewModel so that Footwork can find it when needed:

Explicit Registration¶

Explicitly register (and cache) a viewModel for later use.

The benefit of using fw.viewModel.register() is that the viewModel is cached in memory from the beginning so the user will not need to download it later.

This method can be called in several different ways:

Registering a class function

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

Registering a shared object instance

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

fw.viewModel.register('MyViewModel', {
  instance: new MyViewModel()
});

Registering a createViewModel factory

By utilizing a createViewModel factory you can introduce custom logic to create a viewModel each time a new one is requested:

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

fw.viewModel.register('MyViewModel', {
  createViewModel: function (params, info) {
    // info.element === container/parent element
    return new MyViewModel();
  }
});

Location Registration¶

Using fw.viewModel.registerLocation() you can tell Footwork where it can download your viewModel when it is needed. The advantage of this is that Footwork will not download the module until it is needed (and then it caches the result)...this saves on load time and resources from an end users perspective.

To download your module, Footwork will use AMD/RequireJS...see module format for more information on how to structure your files/modules.

This method can be called in several different ways:

With an explicit path to your viewModel

fw.viewModel.registerLocation('MyViewModel', '/path/to/MyViewModel.js');

Have the module name added at the end for you

// Note the trailing slash, that tells Footwork to add the module name at the end
fw.viewModel.registerLocation('MyViewModel', '/path/to/'); // loads /path/to/MyViewModel.js

You can use a regExp to match and provide a path

// load all *-tool from /tools/
fw.viewModel.registerLocation(/.*-tools/, '/tools/');

// ex: 'shop-tools' would be loaded from /tools/shop-tools.js

You can define several at once

// register the location of several viewModels at once (ie: all in the same folder)
fw.viewModel.registerLocation(['Body', 'Navigation', 'Footer'], '/pageAreas/');

Module Format¶

The loader included with Footwork uses AMD/RequreJS to load your modules. So you should specify your modules like so:

define(["footwork"],
  function (fw) {
    return function MyViewModel () {
      var self = fw.viewModel.boot(this, {
        namespace: 'MyViewModel'
      });
      self.myName = fw.observable('Smith');
    };
  }
);

Note

Your AMD module can return the same types of configurations that fw.viewModel.register() supports.