Todo application using Wix Code, using Wix Code database, data binding and frontend code to customize filters, statistics and clear completed items

2. MacBook Pro
Win a
(for each member of your team)

4. TODO MVC
with WixCode
Yoav Abrahami
Head of Wix Code
$

5. TODO MVC
● Database of TODO items
● Dataset to show, modify and add TODO items
● Code for different actions

6. Database

7. A Database
Title, completed

9. Write only
Text Input

10. TextCheckbox
RepeaterRead / Write

11. Let’s look at the
code...

12. triggered when there is a change in the
addTodo dataset state
when clicking enter in the input, trigger
the update process.
We blur from the input to force the
dataset to be updated, at which point
the dataset will trigger an item save
per the above function
save the state of addTodo Dataset to the
database. This saves the new todo item
refresh the todos Dataset, this will
update the repeater with the new item
update the statistics

13. Because the checkbox is in a repeater,
we need to get the right repeater item
$item represents the current repeater
item
Get the new value from the checkbox
Update the todos dataset with the new
value
Save the todos dataset state to the
database

14. Query for items without a completed flag
equals true
Set the itemsCount text
show the element only after first
setting statistics to prevent loading
blur

15. set the todos dataset to show all
elements
Disable / Enable the buttons
filter to show non complete items -
completed not equals true
filter to show complete items - completed
equals true

16. query all completed items
Remove all completed items
Refresh the todos dataset to update the
repeater

17. Let’s put it all
together...

18. Q&A

19. wix.com/code

20. Thank You!
Yoav Abrahami
yoav@wix.com
NOV 2 0 1 8
YHack, Yale University