Built with KnockoutJS.
Built with AngularJS.
Introduces dependency management with RequireJS to the base KO version.
To facilitate comparison, these variations differ from each other as little as possible. They all have the same UI and the same one-entity TodoItem model. Because our focus is on client-side programming, they share the same server side design and implementation: an ASP.NET Web API controller accessing a SQL database via Entity Framework.
We'll explore some details of the Todo sample and its variations over this and several other pages:
- Application server
Describes everything happening on the Todo application server. The server is the same across all samples
- ViewModel design
All samples have a ViewModel whose API and basic design is the same but whose implementation differs by variation. This topic explains what they have in common.
This module uses Breeze to access remote data and manage data locally; its design and implementation is almost identical accross the variations.
The user experience of all Todo variations is the same.
The app launches with a query for active TodoItems which are shown in a list. Each item has a Description displayed in a label, an IsDone flag governed by a checkbox, and a hidden IsArchived flag.
You create a new Todo by entering its Description in the large textbox below the application title.
You can edit the Description of an exiting Todo by clicking in the label. The label changes to a textbox where you can type or erase characters. Validation rules prevent you from making the description too long or leaving it blank. Label and check/uncheck the IsDone state; such "completed" todos display with a line struck through the label.
The Mark all as complete checkbox (above the item list) toggles the IsDone state of all displayed todos.
Clicking Archive... will flip an item into the archived state if it IsDone and not already archived. The archived item immediately disappears. Checking Show archived (above the item list) will re-query the database to show both active and archived items; archived items display in gold. You can't unarchive an item once it's been archived.
You can delete any item by hovering over the Description and clicking the X that appears to the right.
All changes are saved immediately.
Purge and Reset links at the bottom respectively delete all Todos in the database or reset the data to the initial demo state.
Fiddle with it
Here is another way to see these same "Todos" with Breeze and KO.