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.

DOM Event

Viewi\DOM\Events\DOMEvent is a helper class that represents Event object in javascript. More about DOM Events here: Web API - Event

Useful when you have to deal with an event like click, form submit, etc. For example:

<form method="post" (submit)="subscribe($event)">
    ...
    <button type="submit">
        Subscribe
    </button>
</form>

And then in your component:

function subscribe(DOMEvent $event)
{
    $event->preventDefault();
    $this->http->post("/subscribe", ...

Or for example, it helps you with the file input:

<input type="file" name="file" (change)="fileChanged($event)">
...
public function fileChanged(DOMEvent $event)
{
    if (count($event->target->files)) {
        $file = $event->target->files[0];
        $this->http->post(
            "/api/files/upload",
            $file
        )->then(
            function ($data) {
                $this->message = 'Uploaded successfully';
            },
            function ($error) {
                $this->message = 'Unable to upload.';
                echo $error;
            }
        );
    }
}

Or it could provide some information on event’s target:

function outsideModalClick(DOMEvent $event)
{
    if ($event->target->id === 'modal-overlay') {
        $this->closeModal();
    }
}