Maria.js

Transcript

1. ARE YOU USING MVC FRAMEWORK FOR BROWSER?
2. 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.
3. IS THESE FRAMEWORK REALLY MVC? ANGULAR BACKBONE KNOCKOUT NO.......
4. MARIA.JS THE REAL MVC THE SMALLTALK MVC THE GANG OF FOUR MVC
6. SET NAMESPACE v a r c h e c k i t = { }
7. 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 ; } } } ) ;
8. 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 ) ; } } } ) ;
9. 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 = " " ; } } } ) ;
10. 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 ( ) ; } } } ) ;
11. 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 ) ; } ) ; } } } ) ;
12. PLUGINS http://peter.michaux.ca/maria/plugins.html
13. 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/