Model Events

[refractalize]

How can the model update the view when it changes?

The model can be an event emitter and the view can subscribe to those events, refreshing when they fire.

E.g.

var $ = require('jquery');
var plastiq = require('.');
var h = plastiq.html;
var bind = plastiq.bind;

function render(model) {
  return h('div',
      h('div',
        'promise ',
        h.promise(model.promise, {
          pending: function () {
            return 'pending';
          },
          fulfilled: function (value) {
            return 'fulfilled: ' + value;
          },
          rejected: function (reason) {
            return 'rejected: ' + reason;
          }
        })
      ),
      h('div',
        'state: ',
        h.promise(model.state, {
          pending: 'pending',
          fulfilled: 'fulfilled: ',
          rejected: 'rejected: ',
        })
      ),
      h.animation(model.animation.bind(model)),
      h('div', 'animated text: ', model.text)
    );
}

var model = {
  promise: new Promise(function (result, error) {
    setTimeout(function () {
      result('haha');
    }, 1000);
  }),
  state: $.get('/state'),
  animation: function (render) {
    var self = this;
    self.text = 'start';
    render();
    setTimeout(function () {
      self.text = 'middle';
      render();
      setTimeout(function () {
        self.text = 'end';
        render();
      }, 1000);
    }, 1000);
  }
};

plastiq.attach(document.body, render, model);

[refractalize]

This is a different solution to #3 and #4.