Example

The following demo shows two lists that use this connection. The
"Run Code" button sends the connection data changes which the
connection will then update lists accordingly:

This example creates a todoList function and todoItem function
that manage the behavior of a list of todos and a single todo respectfully.
It uses Object.observe
to observe changes in the todo list and individual todo data. Other
frameworks will typically provide their own observable system.

todoList

When todoList is created, it is passed the set of data to load. It uses
this to get todos from the todoConnection like:

todosConnection.getList(set).then(function(retrievedTodos){

It then adds those todos to the listStore so
they can be updated automatically. And, it listens to changes in todos and calls an update function:

A todoItem needs to be able to stop listening on the todo and remove itself from the
instanceStore if the todo is removed from the page. To provide this teardown
functionality, todoItem listens to a "removed" event on its element and
unobserves the todo and removes it from the instanceStore: