Solitaire mit Backbone

View Github Repository Open presentation in a new window

paulwittmann

See all presentation from paulwittmann

Solitaire mit Backbone

0 1

colognejs-talk-2012-11

"Solitaire mit Backbone"

On Github paulwittmann / colognejs-talk-2012-11

Solitaire mit Backbone

Cologne.js13. November 2012

Paul Wittmann paul@railslove.com

Überblick

Live Demo + Drag & Drop Architektur Backbone Relational
  • Datenmodell
Backbone Marionette
  • Layout Struktur
  • Collection Views

1. Live Demo

2. Architektur: Komponenten

  • Ruby on Rails
  • CoffeeScript
  • Backbone.js
    • HAML Coffee Templates
  • HTML5 Drag & Drop API

3. Backbone Relational: Datenmodell

3. Backbone Relational

class IG.Models.Column extends Backbone.RelationalModel
  relations: [
    type: Backbone.HasMany
    key: 'cards'
    relatedModel: 'IG.Models.Card'
    collectionType: 'IG.Collections.Cards'
    reverseRelation:
      key: 'column'
      includeInJSON: '_id'
  ]
          
card = IG.columns.first().get('cards').first())
  # => erste Karte der Column
card.get('column') # => IG.columns.first()

4. Marionette Layout

<!-- server-seitig -->
<body>
  <div class='fork-me'></div>
  <div id='l-game-container'></div>
</body>
          
class IG.AppLayout extends Backbone.Marionette.Layout
  template: 'layouts/application'
  el: '#l-game-container'
  regions:
    navigation:  '#l-header-container--navigation-wrapper'
    content: '#l-content-container'
          
IG.appLayout.content.show
  new IG.Views.ColumnsCollection(collection: IG.columns)

4. Marionette Views

class IG.Views.ColumnsCollection extends Backbone.Marionette.
CollectionView

  itemViewContainer: '.columns-wrapper'
  itemView: IG.Views.ColumnsShow
            
class IG.Views.ColumnsShow extends Backbone.Marionette.CollectionView

  itemView: IG.Views.CardsShow

            
class IG.Views.CardsShow extends Backbone.Marionette.ItemView

Bonus Level: Spiel speichern

data = "IG.stack.set(#{JSON.stringify(IG.stack)});
        IG.columns.reset(#{JSON.stringify(IG.columns)});
        IG.piles.reset(#{JSON.stringify(IG.piles)});"

$('.octet-download')
  .attr 'href', "data:text/octet-stream;base64,#{$.base64.encode(data)}"
grässliche Dateinamen in Firefox =(

Bonus Level: DOMNodeInserted Hack

+keyframes(nodeInserted)
  from
    clip: rect(1px, auto, auto, auto)
  to
    clip: rect(0px, auto, auto, auto)

.m-column
  .m-card
    // abusing CSS3 animations to catch event of newly inserted DOM elements
    +animation-duration(0.001s)
    +animation-name(nodeInserted)
          
// http://davidwalsh.name/detect-node-insertion
insertListener = (event) ->
  if event.animationName == 'nodeInserted'
    $(event.target).removeClass 'off-the-board'

document.addEventListener('animationstart', insertListener, false)
◄►▲▼