slimapp

Simplest MVVM

Background

A practice of hyperapp

Usage

Checkout the examples

Slimapp provides two functions: h and app.

h

h helps you to build your vdom

var vdom = h('span', {class: 'test'}, ['text'])
// vdom: {
//  tagName: 'span',
//  key: undefined,
//  props: {class: 'test'},
//  children: ['text']
// }

app

app helps you to start your app

var view = function(actions, state) {
  return h('p', {}, [state.a])
}
var actions = {
  add: data => state => { state.a += data },
  minus: data => state => { state.a -= data }
}
var state = {
  a: 1
}
var vm = app(view, actions, state, document.body)

console.log(document.body.innerHTML) // '<p>1</p>'

vm.add(1) // '<p>2</p>'
vm.minus(3) // '<p>-1</p>'