Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


FOAM TodoMVC Example

FOAM is a collection of Javascript libraries: an Object-oriented core, MVC, reactive programming, HTML views, data storage, and more.

See the main site for more information.

Learning FOAM

The FOAM site is the place to get started.

FOAM is beta and under heavy development. The tutorial is the best place to get started, and more documentation can be found in the documentation browser.


The main pieces here are the Todo model and the controller. Both have a template - for an individual row, and for the whole page, respectively.

Controller is the central point of coordination for the app. It has several different reactive pieces.

  • It has a property, input, which is bound to the new todo input box. When the user presses enter, the value from the DOM element is written to input, and its postSet will fire, adding the new Todo to the database.
  • dao ("Data Access Object") is the unfiltered database of all Todos.
  • filteredDAO is a filtered view onto that database. The filter is controlled by query.
  • The view property for query determines the appearance and behavior of the All-Active-Completed buttons.
  • The one action is attached to the Clear Completed button.
  • A listener, onDAOUpdate, fires whenever the underlying data updates. It causes the list to re-render.

Of particular interest is the line which begins

this.filteredDAO = this.dao = TodoDAO.create({

TodoDAO is a simple wrapper that ensures an entry which is edited to be empty gets removed. Its delegate is the underlying DAO, which here is an EasyDAO. EasyDAO is a facade that makes it easy to construct common storage patterns:

  • model defines the type of data we're storing, here a `Todo.
  • seqNo: true means that Todo's id property will be auto-incremented.
  • daoType: 'StorageDAO' means our DAO is backed by LocalStorage.
  • EasyDAO by default caches any DAO that isn't in-memory. This means that the entire LocalStorage contents are loading into the cache at startup, and all updates are written through to memory and LocalStorage.


The only step needed to get the example working is bower install.

To run the app, spin up an HTTP server and visit http://localhost:8000/.


This TodoMVC implementation was created by the FOAM team at Google Waterloo.