Reactivity in Choo

Model.js

var Component = require('choo/component')

const NO_COMPONENT = 'Model constructor expects a Component as first argument.'

module.exports = class Model {
  constructor (component, opts) {
    if (!component || !(component instanceof Component)) {
      throw new Error(NO_COMPONENT)
    }

    this.component = component
    this.opts = opts
    this.value = ''

    this.update = this.update.bind(this)
  }

  update (e) {
    this.value = e.target.value

    this.component.rerender()
  }

  reset () {
    this.value = ''
  }
}

SomeComponent.js

var Component = require('choo/component')
var html = require('choo/html')
var Model = require('./Model')

module.exports = class SomeComponent extends Component {
  constructor (name, state, emit) {
    super()

    this.fields = {
      name: new Model(this)
    }
  }

  update () {
    return false
  }

  createElement () {
    return html`
      <form>
        <p>
          <label>Name</label><br>
          <input type="text"
            value=${this.fields.name.value} 
            onkeyup=${this.fields.name.update}>
        </p>
        <button onclick=${this.onSubmit}>
          OK
        </button>
      </form>`
  }

  clear () {
    Object.keys(this.fields).forEach(key => {
      this.fields[key].reset()
    })
  }

  onSubmit (e) {
    e.preventDefault()

    this.clear()
  }
}