A lightweight JavaScript framework that handles DOM bindings for small projects.
A lightweight JavaScript framework that handles DOM bindings for small projects.
Why? When you want to quickly experiment with small projects in vanilla JS, but don't want to write and handle DOM reference code. So, just markup the DOM and call ``binded.bind()` to get all the references.
`
npm install @kurons/binded
The bundle from `node_modules/@kurons/binded/dist/binded.js` can be loaded in a browser.
`html`
Declares a scope. Multiple scopes can be declared. Scopes can be nested within another scope. There has to be at least one scope declared.
* A declared scope cannot contain any other `binded` bindings; they will be ignored.
* If there is a collision with the scope alias and another alias, the scope alias will take precedence.
`html`
Bind an element.
`html`
Bind a property.
`html`
Bind another property.
`html`
Bind multiple element properties.
`html`
Access references from JS.
`javascript`
const { app } = binded.bind(document.body);
console.log(app.searchForm);
app.search = 'Example Search Text';
app.turnOffSearch = true;
app.disableAllButtons = true;
| Name | Notes | Example |
| ---- | ----- | ------- |
| `binded-scope` | Declares a scope | `` |`
| binded-attr` | Binds directly to an element's attribute | `` |`
| binded-elem` | Binds an element. Generally, this reference should be avoided unless the element's content is rendered with DOM APIs. | `` |`
| binded-event` | Binds a function as an event on an element. The `prevent` and `stop` event modifiers for `preventDefault` and `stopPropagation` is available and can be appended after the event name separated by `.`. | `` |`
| binded-html` | Binds to an element's `innerHTML` | `` |`
| binded-prop` | Binds to an element's property | `` |`
| binded-style` | Binds to an element's style | `` |`
| binded-text` | Binds to an element's `innerText` | `` |
`javascript`
binded.bind( // Binds an element and returns an object with the bindings.
// * Can be called multiple times to process new bindings for a scope
// * Assumes scope hierarchy has not changed when called multiple times
document.body, // There has to be at least 1 scope binded as a child in the specified element
{
attrPrefix: 'binded', // The attribute prefix, default is 'binded'
context: { // Context is needed for binded-event
event: {
searchText: event => console.log(event),
}
}
}
);
The expression is primarily used to keep the HTML readable and clear on what's being binded.
`
[