Reactive variables are variables that trigger updates when their values change. They are useful when part of the UI should respond automatically to state changes.
In Nijor, reactive variables are declared differently from normal JavaScript variables. They do not need to be initialized using let or const.
A reactive variable is declared using the $. symbol. The syntax is:
$.varname = value;
Example:
<body>
<h1>Count : {$.count}</h1>
</body>
<script>
$.count = 0;
</script>
In this example, $.count is a reactive variable. When its value changes, Nijor can update the parts of the component that depend on it.
Reactive variables can be updated by assigning a new value to them.
<body>
<h1>Count : {$.count}</h1>
<button on:click="increment()">Increase</button>
<button on:click="decrease()">Decrease</button>
</body>
<script>
$.count = 0;
function increment($) {
$.count++;
}
function decrement($) {
$.count--;
}
</script>
You can't use $ directly inside inline-event functions ; you need to pass $ as the last argument in the function signature but don't have to pass it while calling from inline-events.
Nijor also supports derived reactive variables. These are reactive values whose value depends on other reactive variables.
A derived reactive variable is declared using the _ : label.
$.count = 0;
_ : $.double = $.count * 2;
In this example, $.double is derived from $.count. Whenever the value of $.count changes, Nijor automatically recalculates $.double.
Any part of the UI that references $.double will also update automatically when its value changes.
<body>
<h2>Count: {$.count}</h2>
<h2>Double: {$.double}</h2>
<button on:click="increment()">Increase</button>
</body>
<script>
$.count = 0;
_ : $.double = $.count * 2;
function increment($) {
$.count++;
}
</script>
Nijor provides the n:ref attribute for creating references to DOM elements. This is useful when you need direct access to an input, select, or similar form element inside your component logic.
When this attribute is used, $.varname becomes a reference to the DOM node of that element.
<body>
<input type="text" n:ref="{$.username}">
<button on:click="showValue()">Show Value</button>
</body>
<script>
function showValue($) {
console.log($.username.value);
}
</script>
In this example, $.username refers to the input element itself. This makes it possible to access properties such as $.username.value.
The same pattern also works with other form elements such as select.
<body>
<select n:ref="{$.theme}">
<option value="light">Light</option>
<option value="dark">Dark</option>
</select>
<button on:click="printTheme()">Print Theme</button>
</body>
<script>
function printTheme($) {
console.log($.theme.value);
}
</script>
Nijor provides the n:bind attribute for binding user input to a reactive variable. It can be used on input, textarea, and elements with contenteditable="true".
When a bound element changes, the value of the reactive variable is updated in real time.
<body>
<h1>নমস্কাৰ {$.name || "Person"} !</h1>
<input n:bind="{$.name}">
</body>
In this example, typing into the input updates $.name immediately. Since the heading depends on $.name, it also updates automatically.
The same pattern works with other supported elements.
<body>
<textarea n:bind="{$.message}"></textarea>
<p>{$.message}</p>
</body>
<body>
<div contenteditable="true" n:bind="{$.text}"></div>
<p>{$.text}</p>
</body>
The $ variable is reserved by Nijor for reactivity and internal framework behavior.
Since reactive variables are declared through $, they should not be redefined manually.
Reactivity in Nijor is still evolving, so behavior may change as the framework develops.