marionette behaviors
DESCRIPTION
Jason Laster explains how you can use Marionette Behaviors in your own app. Marionette.js: http://marionettejs.com Dancing with Marionette Meetup: http://www.meetup.com/Dancing-with-Ma... Marionette Chat Room: https://gitter.im/marionettejs/backbo... Jason Laster: https://twitter.com/jasonlaster11TRANSCRIPT
BehaviorsBOOM
Jason Laster
Jason Laster
Jason Laster
Jason Laster
BehaviorsBOOM
Dropdown Hot Keys Overlays Overlayable
Animations Transitions Validation Error States
Sorting Drag & Drop
…
Tooltips Disablable
Navigable
… … … …
Auto Save Form State Tables
Nav Bar Cards …
Username
Password
Signin
Username
Password
Signin
x
1 SignInForm = Marionette.ItemView.extend 2 ui: 3 userNameField: '.username' 4 passwordField: '.password' 5 signinBtn: '.signin' 6 7 events: 8 'click @ui.signinBtn': 'onClickSignin' 9 10 onClickSignin: -> 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
1 SignInForm = Marionette.ItemView.extend 2 ui: 3 userNameField: '.username' 4 passwordField: '.password' 5 signinBtn: '.signin' 6 close: '.close' 7 8 events: 9 'click @ui.signinBtn': 'onClickSignin' 10 'click @ui.close': 'onOverlayClose' 11 12 onClickSignin: -> 13 14 onOverlayClose: -> 15 Radio.commands.execute('app', 'overlay:close') 16 17 18 19 20 21 22 23 24 25
1 Overlay = Marionette.Behavior.extend 2 ui: 3 close: '.close' 4 5 events: 6 'click @ui.close': 'onOverlayClose' 7 8 onOverlayClose: -> 9 Radio.commands.execute('app', 'overlay:close') 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
1 SignInForm = Marionette.ItemView.extend 2 ui: 3 userNameField: '.username' 4 passwordField: '.password' 5 signinBtn: '.signin' 6 close: '.close' 7 8 events: 9 'click @ui.signinBtn': 'onClickSignin' 10 'click @ui.close': 'onOverlayClose' 11 12 onClickSignin: -> 13 14 onOverlayClose: -> 15 Radio.commands.execute('app', 'overlay:close') 16 17 18 19 20 21 22 23 24 25
1 SignInForm = Marionette.ItemView.extend 2 ui: 3 userNameField: '.username' 4 passwordField: '.password' 5 signinBtn: '.signin' 6 7 events: 8 'click @ui.signinBtn': 'onClickSignin' 9 10 onClickSignin: -> 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
1 SignInForm = Marionette.ItemView.extend 2 3 behaviors: 4 Overlay: {} 5 6 ui: 7 userNameField: '.username' 8 passwordField: '.password' 9 signinBtn: '.signin' 10 11 events: 12 'click @ui.signinBtn': 'onClickSignin' 13 14 onClickSignin: -> 15 16 17 18 19 20 21 22 23 24 25
Pizza
Burritos
Sushi
Paninis
Pizza
Burritos
Sushi
Paninis
Food
Food
Pizza
Burritos
Sushi
Paninis
Food
Pizza
Burritos
Sushi
Paninis
Food
Pizza
Burritos
Sushi
Paninis
Food
1 ListView = Marionette.ItemView.extend 2 3 events: 4 'click .option': 'onClickOption' 5 6 onClickOption: (e) -> 7 // ... 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
1 ListView = Marionette.ItemView.extend 2 3 events: 4 'click .option': 'onClickOption' 5 'click .button': 'onDropdownShow' 6 7 onClickOption: (e) -> 8 // ... 9 10 onDropdownShow: -> 11 this.$el.toggleClass('open'); 12 13 14 15 16 17 18 19 20 21 22 23 24 25
1 SignInForm = Marionette.ItemView.extend 2 3 behaviors: 4 Overlay: {} 5 6 ui: 7 userNameField: '.username' 8 passwordField: '.password' 9 signinBtn: '.signin' 10 11 events: 12 'click @ui.signinBtn': 'onClickSignin' 13 14 onClickSignin: -> 15 16 17 18 19 20 21 22 23 24 25
1 Dropdown = Marionette.Behavior.extend 2 3 events: 4 'click .button': 'onDropdownShow' 5 6 onDropdownShow: -> 7 this.$el.toggleClass('open');
1 ListView = Marionette.ItemView.extend 2 3 events: 4 'click .option': 'onClickOption' 5 'click .button': 'onDropdownShow' 6 7 onClickOption: (e) -> 8 // ... 9 10 onDropdownShow: -> 11 this.$el.toggleClass('open'); 12 13 14 15 16 17 18 19 20 21 22 23 24 25
1 ListView = Marionette.ItemView.extend 2 3 events: 4 'click .option': 'onClickOption' 5 6 onClickOption: (e) -> 7 // ... 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
1 ListView = Marionette.ItemView.extend 2 3 behaviors: 4 Dropdown: {} 5 6 events: 7 'click .option': 'onClickOption' 8 9 onClickOption: (e) -> 10 // ... 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
1 ListView = Marionette.ItemView.extend 2 3 behaviors: 4 Dropdown: {} 5 HotKeys: {} 6 7 events: 8 'click .option': 'onClickOption' 9 10 keyPresses: 11 'up': 'goUp' 12 'down': 'goDown' 13 'enter': 'onEnter' 14 15 onClickOption: (e) -> 16 17 goUp: -> 18 19 goDown: -> 20 21 onEnter: -> 22 23 24 25
Pizza
Burritos
Sushi
Paninis
Food
The Marionette Hunter
$150.00 1x
The Marionette Hunter $$$
$150.00 1x
The Marionette Hunter $$$
$150.00 1x
The Marionette Hunter
$150.00 1x
The Marionette Hunter
$150.00 1x
The Marionette alpha Hunter
$150.00 1x
The Marionette alpha Hunter
$150.00 1x
The Marionette alpha Hunter
$150.00 1x
The Marionette alpha Hunter
$150.00 1x
Form State Validation
Tooltipsauto save
Behaviors help organizeevents and actions
Behaviors help organizeevents and actions+ Separation of Concerns
Behaviors help organizeevents and actions+ Separation of Concerns + Unit Tests
Behaviors help organizeevents and actions+ Separation of Concerns + Unit Tests + Style Guide
Behaviors help organizeevents and actions+ Separation of Concerns + Unit Tests + Style Guide + Complex Interactions
Dropdown Hot Keys Overlays Overlayable
Animations Transitions Validation Error States
Sorting Drag & Drop
…
Tooltips Disablable
Navigable
… … … …
Auto Save Form State Form State
Nav Bar Cards Tables
Dropdown Hot Keys Overlays Overlayable
Animations Transitions Validation Error States
Sorting Drag & Drop
…
Tooltips Disablable
Navigable
… … … …
Auto Save Form State Form State
Nav Bar Cards Tables
Dropdown Hot Keys Overlays Overlayable
Animations Transitions Validation Error States
Sorting Drag & Drop
…
Tooltips Disablable
Navigable
… … … …
Auto Save Form State Form State
Nav Bar Cards Tables
Dropdown Hot Keys Overlays Overlayable
Animations Transitions Validation Error States
Sorting Drag & Drop
Listings
Tooltips Disablable
Navigable
Receipts Carts Convos …
Auto Save Form State Form State
Nav Bar Cards Tables
