Upcoming SlideShare
Loading in...5
×
 

Marionette Behaviors

on

  • 434 views

Jason Laster explains how you can use Marionette Behaviors in your own app. ...

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/jasonlaster11

Statistics

Views

Total Views
434
Slideshare-icon Views on SlideShare
326
Embed Views
108

Actions

Likes
1
Downloads
3
Comments
0

1 Embed 108

https://gitter.im 108

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Marionette Behaviors Marionette Behaviors Presentation Transcript

    • Behaviors BOOM
    • Jason Laster
    • Jason Laster
    • Jason Laster
    • Jason Laster
    • Behaviors BOOM
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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 organize events and actions
    • Behaviors help organize events and actions + Separation of Concerns
    • Behaviors help organize events and actions + Separation of Concerns + Unit Tests
    • Behaviors help organize events and actions + Separation of Concerns + Unit Tests + Style Guide
    • Behaviors help organize events 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
    • Jason Laster @jasonLaster11 jlaster@etsy.com