Show HN: Monkberry – a JavaScript library for building web user interfaces

Monkberry is blazingly fast, small 1kb and simple
JavaScript library for building web user interfaces.

Install v4.0.0

Features
small 1kb minified & gzipped
simple, small learning curve
fully tested
precompiled templates
source maps
custom tags
blazingly fast (only necessary dom updates)

Template

{% for i, todo of todos %}

{% if todo.complete %}
{{ todo.text }}
{% else %}
{{ todo.text }}
{% endif %}

{% endfor %}

Add #{{ todos.length }}

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

const view = Monkberry.render(Template, document.body);
const input = view.querySelector(‘input’);

view.update(state);

view.on(‘submit’, ‘form’, function (event) {
event.preventDefault();
state.todos.push({text: input.value, complete: false});
view.update(state);
input.value = ”;
});

view.on(‘click’, ‘[data-index]’, function (event) {
var i = event.target.dataset.index;
state.todos[i].complete = !state.todos[i].complete;
view.update(state);
});


Original URL: http://feedproxy.google.com/~r/feedsapi/BwPx/~3/PJ8bCHo1zLc/

Original article

Comments are closed.

Proudly powered by WordPress | Theme: Baskerville 2 by Anders Noren.

Up ↑

%d bloggers like this: