JSFiddle - React, Tailwind, and code Playground

by abernier

HTML

<script src="https://raw.github.com/maccman/spine/master/lib/spine.js"></script>
<script src="https://raw.github.com/maccman/spine/master/lib/relation.js"></script>

CoffeeScript

#
# Book
#

class Book extends Spine.Model
  @configure 'Book', 'title'
  @hasMany 'pages', 'Page'
window.Book = Book

#
# Page
#

class Page extends Spine.Model
  @configure 'Page', 'title'
  @belongsTo 'book', 'Book'
window.Page = Page

#
# Listen on Book and Page events
#

for model in [Book, Page]
  model.bind('create',  (rec) => console.log rec, 'was created')
  model.bind('update',  (rec) => console.log rec, 'was updated')
#  model.bind('save',    (rec) => console.log rec, 'was saved (created/updated)')
  model.bind('destroy', (rec) => console.log rec, 'was destroyed')
#  model.bind('change',  (rec) => console.log rec, 'was changed (created/updated/destroyed)')
  model.bind('refresh', (records, options) => console.log model, 'was refreshed with', records, 'and options', options)

##

myBook = Book.create(id: 1, title: 'My Book')
window.myBook = myBook
  
page1 = Page.create(id: 1, title: 'Page 1', book: myBook)
window.page1 = page1
page2 = Page.create(id: 2, title: 'Page 2')
window.page2 = page2
page3 = Page.create(id: 3, title: 'Page 3', book: myBook)
window.page3 = page3

console.log Page.all(), myBook.pages().all()

##

myBook.updateAttributes(name: 'My Favorite book', pages: [
  #{
  #  id: 1    # DESTROY?
  #}
  {
    id: 2
    title: 'Page Two'    # UPDATE?
  }
  {
    id: 3
    title: 'Page Three'  # CREATE?
  }
])
console.log Page.all(), myBook.pages().all()