ARE YOU USING MVC FRAMEWORK FOR BROWSER? 

WHAT MVC MEANS? A model contains domain data. When a model changes, it informs its observers. A view observes a model and represents its model's current state A controller decides what happens when a user interacts with the controller's view. 

IS THESE FRAMEWORK REALLY MVC? ANGULAR BACKBONE KNOCKOUT NO....... 

MARIA.JS THE REAL MVC THE SMALLTALK MVC THE GANG OF FOUR MVC 

No content

SET NAMESPACE v a r c h e c k i t = { } 

MARIA.MODEL m a r i a . M o d e l . s u b c l a s s ( c h e c k i t , ' T o d o M o d e l ' , { p r o p e r t i e s : { _ c o n t e n t : ' ' , _ i s D o n e : f a l s e , g e t C o n t e n t : f u n c t i o n ( ) { r e t u r n t h i s . _ c o n t e n t ; } } } ) ; 

VIEW m a r i a . S e t V i e w . s u b c l a s s ( c h e c k l i s t , ' T o d o s L i s t V i e w ' , { p r o p e r t i e s : { c r e a t e C h i l d V i e w : f u n c t i o n ( t o d o M o d e l ) { r e t u r n n e w c h e c k l i s t . T o d o V i e w ( t o d o M o d e l ) ; } } } ) ; 

CHILD VIEW m a r i a . E l e m e n t V i e w . s u b c l a s s ( c h e c k l i s t , ' T o d o I n p u t V i e w ' , { u i A c t i o n s : { " c l i c k b u t t o n " : " a d d N e w T o d o " } , p r o p e r t i e s : { g e t I n p u t V a l u e : f u n c t i o n ( ) { r e t u r n t h i s . f i n d ( " i n p u t " ) . v a l u e ; } , c l e a r I n p u t : f u n c t i o n ( ) { t h i s . f i n d ( " i n p u t " ) . v a l u e = " " ; } } } ) ; 

CONTROLLER m a r i a . C o n t r o l l e r . s u b c l a s s ( c h e c k l i s t , ' T o d o I n p u t C o n t r o l l e r ' , { p r o p e r t i e s : { a d d N e w T o d o : f u n c t i o n ( ) { v a r t o d o = n e w c h e c k l i s t . T o d o M o d e l ( ) ; t o d o . s e t C o n t e n t ( t h i s . g e t V i e w ( ) . g e t I n p u t V a l u e ( ) ) ; t h i s . g e t M o d e l ( ) . a d d ( t o d o ) ; t h i s . g e t V i e w ( ) . c l e a r I n p u t ( ) ; } } } ) ; 

COLLECTION m a r i a . S e t M o d e l . s u b c l a s s ( c h e c k i t , ' T o d o s M o d e l ' , { p r o p e r t i e s : { m a r k A l l D o n e : f u n c t i o n ( ) { t h i s . f o r E a c h ( f u n c t i o n ( t o d o ) { t o d o . s e t D o n e ( t r u e ) ; } ) ; } } } ) ; 

PLUGINS http://peter.michaux.ca/maria/plugins.html 

REFERENCES http://peter.michaux.ca/maria/ https://github.com/petermichaux/maria http://peter.michaux.ca/maria/api/maria.html http://peter.michaux.ca/maria/quick-start-tutorial-for-the- impatient.html http://todomvc.com/architecture-examples/maria/