Todo

It seems every JavaScript library must have a Todo sample. The Breeze Todo isn't much more than a "Hello World", but it demonstrates Breeze's ability to query; create, modify, and delete entities; validate, and save. Give it a try.

Variations

BreezeJS is designed to work with a variety of JavaScript libraries. To make that point, this Todo Sample comes in several flavors, each one a variation in the client implementation.

• Todo-AngularJS
  Built with AngularJS against a .NET server.
• Todo-Knockout
  Built with KnockoutJS against a .NET server.
• Todo-Knockout-Require
  Introduces dependency management with RequireJS to the base KO version.
• Todo-AngularJS-Hibernate
  Built with AngularJS against a Java/Hibernate server
• Todo-AngularJS-Sequelize
  Built with AngularJS against a Node/Sequelize server

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. 

Details

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.

• Dataservice 
  This module uses Breeze to access remote data and manage data locally; its design and implementation is almost identical accross the variations.

User Experience

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.

Enjoy!