Slide 1

Slide 1 text

ARE YOU USING MVC FRAMEWORK FOR BROWSER?

Slide 2

Slide 2 text

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.

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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 ; } } } ) ;

Slide 8

Slide 8 text

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 ) ; } } } ) ;

Slide 9

Slide 9 text

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 = " " ; } } } ) ;

Slide 10

Slide 10 text

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 ( ) ; } } } ) ;

Slide 11

Slide 11 text

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 ) ; } ) ; } } } ) ;

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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/