Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Maria.js

 Maria.js

Fb7edc7cc7a53c903af74d07dcecf9dc?s=128

Revath S Kumar

April 26, 2014
Tweet

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
  5. None
  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/