talio/examples/hello-world/app.js

a smaller, less confuse, mercury

var tl = require('talio')
  , h  = require('talio/node_modules/virtual-dom/h')

var State = talio.StateFactory({
  user: null,
  askingForName: false
})

var vrenderMain = function (state, channels) {
  return h('div', {}, [
    h('h1', {
      style: {
        display: state.user ? 'none' : 'initial' ,
      },
      'ev-click': talio.sendClick(channels.askForName)
    }, [
      'What is your name? ',
      h('small', {}, '(click to answer) ')
    ]),
    h('form', {
      style: {
        display: !state.user && state.askingForName ? 'initial' : 'none' ,
      },
      'ev-submit': talio.sendSubmit(channels.updateName)
    }, [
      h('input', {
        autofocus: true,
        name: 'username'
      })
    ]),
    h('h1', {
      style: {
        display: state.user ? 'initial' : 'none' ,
      },
      className: 'hello'
    }, 'Hello, ' + state.user + '!')
  ])
}

var handlers = {
  askForName: function (State) {
    State.change({
      'user': null,
      'askingForName': true
    })
  },
  updateName: function (State, formdata) {
    State.change('user', formdata.username)
  }
}

talio.run(document.body, vrenderMain, handlers, State)