Module @webly/rebind - v0.4.0
Package Name
π¦ Installation
npm install @webly/rebind
π Quick Start
Briefly show the most common use case.
<head>
<title @text="{title}"></title>
<script type="module" defer>
import {Rebind} from '@webly/rebind';
// import {Rebind} from "https://cdn.jsdelivr.net/npm/@webly/rebind@0.3.0/dist/min/index.js"
new Rebind(document).state({
title: "hello",
say: function(arg) {
alert(this.title + arg)
}
}).run()
</script>
</head>
<body>
<h1 @text="hello world"></h1>
<button @on:click="say('world')">click</button>
</body>
π API Reference
Implicit Variables
Implicit variables are automatically provided. They can be accessed inside directive expressions without being explicitly defined in state.
| Variable | Description |
|---|---|
| $element | current element node |
| $select() | currentElement.querySelector |
| $selectAll() | currentElement.querySelectorAll |
π§Directives
@text
γ@text="text content"γ
Description
Sets the text content of an element. Supports string interpolation using {propertyName} to access properties from the current scope.
Accepted Values / Type
stringβ Plain text or text with placeholders: Example:"Hello {fullName}"
Usage Example
<p @text="Hello {fullName}"></p>
Notes / Behavior
- Multiple placeholders are supported:
"Hi {firstName} {lastName}" - Safe for plain text (does not render HTML).
- Works with deeply nested properties (e.g.,
{user.profile.name}).
@data
γ@data='{ "name": "linus"}'γ
Description
Binds JSON data to the element. Supports direct JSON objects or dynamic properties from the scope, including nested properties.
Accepted Values / Type
- JSON object:
<div @data='{ "name": "linus" }'></div>
- Scope property (dynamic):
<div @data="user"></div>
- Nested property:
<div @data="user.profile"></div>
Usage Example
<div @data='{ "name": "linus" }'>
<p @text="Hello {name}"></p>
</div>
Notes / Behavior
- Property names must not contain spaces.
- Supports deeply nested properties.
@skip
γ@skip=""γ
Description
Skips the element and all its children. None of its directives or content will run.
Usage Example
<div @skip>
<p @text="skiped"></p>
</div>
<p @text="not skiped"></p>
@html
γ@html="html"γ
Description
Set innerHTML to the element
Usage Example
<div @html="<p>Hello World</p>"></div>
<div @html="{html}"></div>
@:attribute
γ@:attributeName="value"γ
Description
Sets or creates an HTML attribute on the element. Supports string interpolation using {property} or nested {object.property} from the current scope. Property names cannot contain spaces.
Usage Example
<button @:class="btn {color}"></button>
@on:event
γ@on:eventType="functionName(arg)"γ
Description
Add event listener to the element.
Usage Example
<button @on:click="increment()" @text="{count}">0</button>
<script>
const rootData = observe({
count: 0,
increment() {
console.log(this.$event)
this.$event.preventDefault()
this.count += 1
}
})
new Rebind(document.body.state(rootData).run())
</script>
@init
γ@init="functionName(arg)"γ
Description
Runs a function from the scope after @data has been initialized on the element.
Accepted Values / Type
- Scope function call with optional arguments:
<div @init="setup(user)"></div>
@for
γ@for=""γ
Description
Iterates over an array or iterable and renders the contents of the <template> for each element.
During iteration, the directive implicitly creates local variables that are available inside the template scope.
The <template> element itself is not rendered; its content is cloned and inserted into the DOM for each item in the collection.
Implicit Variables
The directive automatically exposes the following variable inside the template:
| variable | Description |
|---|---|
| $key | index or key of the iteration |
Usage Example
<ul @data="data">
<template @for="animal in animals">
<li @text="{animal.name}">item</li>
</template>
</ul>
<script>
new Rebind(document.body)
.state({
data: {
animals: [
{ name: "cat", tail: true },
{ name: "husky", tail: true }
]
}
})
.run()
</script>
@if
γ@if="Foo ConditionalOperator Bar; functionName()"γ
Description
Run function when condition is true.
Usage Example
<div @data='{"count": 10}'>
<div @if="{count} > 5"; show()">
<p hidden>Hello World</p>
</div>
</div>
<script>
new Rebind(document.body).state({
show() {
const p = this.$element.querySelector("p")
if (p) p.hidden = !p.hidden
}
}).run()
</script>
π License
Distributed under the MIT License. See LICENSE for more information.