[Epic] TodoMVC Feature List

[nelsonic]

Todo List Basic Functionality

A todo list has only 2 basic functions:

• Add a new item to the list
  • new list item created when the [Enter] key is pressed UX Feature Hitting the [Enter] (Return) key creates a new Todo List item #55
• Check-off an item as "completed" (done/finished)
  • Click/tap on checkbox next to todo item

Add item and Check-off is exactly the "functionality"
you would have in a paper-based Todo List.

TodoMVC "Advanced" Functionality

In addition to these basic functions,
TodoMVC has the ability to:

• Un-check an item as to make it "active" (still to be done)
• Double-click/tap on todo item description to edit it.
• Mark all as complete
• Click X on item row to remove from list.

<footer> Menu > GOTO: #53

below the main interface there is a <footer>
with a count, 3 view toggles and one action:

• "{count} item(s) left":
  
  {store.items.filter(complete==false)} item{store.items.length > 1 ? 's' : '' } left
• Show All
• Show Active
• Show Completed
• Clear Completed > delete item.done === true

Routing / Navigation

Finally, if you click around the <footer> toggle menu,
you will notice that the Web Bowser Address bar
changes to reflect the chosen view.

When a route link is clicked

• update invokes route(model, title, hash) function which updates model.hash to the value of hash

• filter view based on model.hash

  • set <footer> view button as active
  • filter todo items based on selected view:
    • ALL: no filter
    • active: !item.done
    • complete: item.done === true

• Subscriptions for event handling e.g: keyboard press & navigation changes Subscriptions: How to "Listen" for Events and What to do ... #57

[nelsonic]

[nelsonic]

[nelsonic]

[nelsonic]

View works:

[nelsonic]

[nelsonic]