xbind.js - super simple, lightweight & friendly

xbind.js is a rugged, minimal frontend helper for manipulating contents on your web page.

No virtual DOM, non reactive..., this is good old style but reasonable

Include a single script, markup your page, and ready for working with your frontend scripts. The variables returned from xbind.js can be used as view-model. Think of it like jQuery for the modern web. It’s super simple that you can get started xbind.js within few minutes.

Binding

``html

`

This code tells you what xbind.js will bring to you. With a xb-bind-on keyword, you can modify inner texts of DOM elements by assigning strings to bound variables.

`html

Your address

Address 1

Address 2

City

State

Zip

Country

Print

`

You can also get values or texts from your input elements as well. These bound variables are bound bi-directionally, so that you can retrieve input values easily.

`html

Your links

• First


• Second


• Third

`

With a xb-affect-to keyword, you can modify properties of elements as well.

Cloning with template

`html

Your section

`

With a xb-present-if keyword along with template tag, you can add a block of DOM elements from script.

`html

Your table

Year	Place

`

With a xb-repeat-for keyword along with template` tag, you can duplicate a block of DOM elements as you need.