Run a live version of this ToDo application.
The application is based on the UI design from the ToDoMVC examples, but without a strict MVC design focus.
Instead, this version demonstrates how designing the application to use Golgi's WebComponents can be used to simplify the control of the UI in line with the state of the tasks and the application's editing and filtering controls.
It also showcases the use of our DPP abstraction of the IndexedDB database, which allows the persistent todo object to be treated in the Golgi application as if it was just a plain old JavaScript object.
Furthermore, DPP provides the basis for reactive control: any changes to the persistent todo object trigger events, and these are used to invoke state updates within the application's Golgi WebComponents.
The application has a single Assembly that marshalls the main Components into place:
- the Root Component
- the Header Component, where new Tasks are entered
- the Item-Group Component, which provides the parent target for each individual Task Item Component
- the Footer Component, which displays the counter and filtering controls
Each task is represented by an Item WebComponent which looks after the rendering and display of each individual task. Each task Component is appended to the Item-Group Component.
Separately from the UI, a persistent object - todos - is maintained within the browser's indexedDB database by DPP. As far as the application is concerned, todos is simply treated as a standard JavaScript Object.
The todos object holds the details of each Task, specifically:
- its text value
- whether or not it has been completed
It also holds the display mode (as determined by the Footor Component's buttons):
- display all tasks
- display only active tasks
- display only completed tasks
The UI state is handled from within the Root Component. It updates the state of each Item Component and removes any Item Components that no longer have a matching todo record. It also triggers a state update of the Footer Component.
DPP save and delete events are used to trigger the Root Component state updates.
User interactions within the application itself only change the contents of the todos object, which, in turn, causes the UI state to be updated.
The resulting logic is surprisingly simple, clean and compact, demonstrating the benefits of Golgi's WebComponent-based design, and further simplified by the use of DPP to transparently handle the persistent storage of the todos Object and to provide reactive control.
NOTE: You must use a modern browser that supports WebComponents to run this example!