Monkberry Directives

by Anton Medvedev

HTML

<script src="https://cdn.jsdelivr.net/monkberry-standalone/4.0.6/monkberry.min.js"></script>
<script type="text/monkberry" id="Template">
  <ol>
    {% for color of colors %}
      <li :bg={{ color }}>{{ color }}</li>
    {% endfor %}
  </ol>
  <button>Add random color</button>
</script>

CSS

body {
  background: #262E3D;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

ol {
  list-style: none;
  padding: 0;
}

li {
  width: 100px;
  padding: 5px;
  text-transform: uppercase;
}

Babel + JSX

const state = {
  colors: [
    randomColor(),
    randomColor(),
    randomColor()
  ]
};

const directives = {
  bg: class {
    constructor() {
      this.node = null;
    }

    bind(node) {
      this.node = node;
    }

    unbind(node) {
      this.node = null;
    }

    update(color) {
      this.node.style.backgroundColor = color;
    }
  }
}

const view = Monkberry.render(Template, document.body, {directives});
view.update(state);

view.on('click', 'button', () => {
  state.colors.push(randomColor());
  view.update(state);
});

function randomColor() {
	return '#' + Math.floor(Math.random() * 16777215).toString(16);
}