MeltJS Counter App

by Alex Ou

HTML

<body>
  <div id="app"></div>
  <script src="https://unpkg.com/[email protected]/dist/melt.min.js"></script>
</body>

Babel + JSX

Melt.app({
  elem: '#app', //the root DOM element
  model: {
    count: 0
  },
  update: {
    // The pure function that updates the model
    // Notice that the model is passed in as the argument
    decrease: function ({ model }) {
      return { count: model.count - 1 }
    },
    increase: function ({ model }) {
      return { count: model.count + 1 }
    }
  },
  template: 
  `<div>
  	<button on-click='{decrease}'>-</button>
  	<span>{model.count}</span>
    <button on-click='{increase}'>+</button>
  </div>`
})