nylon

Nylon =====

Usage no npm install needed!

<script type="module">
  import nylon from 'https://cdn.skypack.dev/nylon';
</script>

README

Nylon

Create a model

class Person extends Model
  @attr 'name':
    default: 'Anonymous'
    validate: (value) -> return false unless value # Required

  @attr 'birthday':
    default: 0
    set: (value) -> Math.min value, 1900 + (new Date).getYear() # Clamp value

class Book extends Model
  @attr 'title':
    default: 'Untitled'

  @attr 'publishedAt':
    default: 0

Change model instance attributes

vonnegut = new Person name: 'Vonnegut'
vonnegut.set name: 'Kurt Vonnegut', birthday: 1922

Create a relationship

# Imply a two-way relationship by defining both relationships together.
Person.hasMany publications: Book
Book.belongsToOne author: Person, as: 'publications'

Change model instance relationships

catsCradle = new Book title: 'Cat’s Cradle', publishedAt: 1963
vonnegut.get('publications').add catsCradle
# catsCradle.get('author') is vonnegut

Create a view

class Bio extends View
  @model: Person # Model for this view

  @template: '''
    <button class="delete">X</button>
    <div class="name"></div>
    <div class="pubs"></div>
  '''

  # Assign certain elements property names
  @el '.name': name
  @el '.pubs': pubs

  # These "@render" methods fire when a "change" is triggered.

  @render 'name': (value) ->
    @name.innerHTML = value

  @render 'publications': ->
    @pubs.innerHTML = @model.publicaions.count()

Create a controller

class BioEditor extends Controller
  @view: Bio # View for this controller

  constructor: ->
    @el.setAttribute 'tabindex', 0 # This controller can be focused.

  @on 'click* .delete': 'deleteModel' # The "*" means prevent default.

  @on 'keydown*:DELETE': 'deleteModel' # Keys can be passed on key events.

  deleteModel: =>
    @model.destroy() # Automatically disconnects controller, removes view.