Javascript

【Javascript】ユーザーインターフェースを構築するためのライブラリ。Monkberry

November 19, 2016
Monkberry

Monkberryは、Webユーザーインターフェースを構築するための1キロバイトと軽量で簡単なJavaScriptライブラリ

Template

<ol>
  {% for todo of todos %}
    <li>
      {% if todo.complete %}
        <del>{{ todo.text }}</del>
      {% else %}
        <em>{{ todo.text }}</em>
      {% endif %}
    </li>
  {% endfor %}
</ol>
<form>
  <input type="text">
  <button type="submit">Add #{{ todos.length + 1 }}</button>
</form>

JavaScript

const state = {
  todos: [
    {text: 'Primum', complete: true},
    {text: 'Secundo', complete: false},
    {text: 'Tertium', complete: false}
  ]
};

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

view.on('submit', 'form', function (event) {
  event.preventDefault();
  const input = view.querySelector('input');

  state.todos.push({text: input.value, complete: false});
  view.update(state);

  input.value = '';
});

MIT