This site is built with Viewi itself. It is experimental and still in development. If you see any bugs please do not hesitate and open an issue or DM me on Twitter.

Form Input Bindings

Text

You can use model="$myValue" directive to create two-way data binding on form inputs. For example:

class EventHandling extends BaseComponent
{
    public string $name = '';
...
<input model="$name" placeholder="Enter your name" />
<div>Your name is: $name</div>

The result:

Your name is:

Multiline Text

For textarea everything is the same. For example:

class EventHandling extends BaseComponent
{
    public string $message = '';
...
<textarea model="$message" placeholder="Enter your message"></textarea>
<div>Your message is:</div>
<p style="white-space: pre-line;">$message</p>

The result:

Your message is:

Please note: interpolation <textarea>$message</textarea> will not work.

Checkbox

Same here, use two-way data binding directive for checkbox type. For example:

class EventHandling extends BaseComponent
{
    public bool $checked = false;
...
<label>
    <input type="checkbox" model="$checked" /> Visible
</label>
<div if="$checked">I'm visible!</div>

The result:

Multiple checkboxes with array value binding:

class EventHandling extends BaseComponent
{
    public array $checkedNames = [];
    function getNames()
    {
        return json_encode($this->checkedNames);
    }
...
<input type="checkbox" id="jack" value="Jack" model="$checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" model="$checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" model="$checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {getNames()}</span>

The result:


Checked names: []

Radio

Same here, use two-way data binding directive for radio type. For example:

class EventHandling extends BaseComponent
{
    public string $picked = '';
...
<input type="radio" id="one" value="One" model="$picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" model="$picked">
<label for="two">Two</label>
<br>
<span>Picked: $picked</span>

The result:



Picked:

Select

The same as well, for example:

class EventHandling extends BaseComponent
{
    public string $selected = '';
...
<select model="$selected">
    <option disabled value="">Please select one</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>
<span>Selected: $selected</span>

The result:

Selected:

Multiple select, array binding:

class EventHandling extends BaseComponent
{
    public array $selectedList = [];
...
<select model="$selectedList" multiple>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>
<br>
<span>Selected: {json_encode($selectedList)}</span>

The result:


Selected: []