Fork me on GitHub

Jaxon HTML attributes

This example shows how to use Jaxon HTML custom attributes to attach a component to a DOM node, and define event handlers.

Initial content : Hello World!
Initial content : Hello World!
The HTML code.


<div class="row">
    <div class="col-md-12" <?= attr()->bind(rq(App\Test\Test::class)) ?>>
        Initial content : <?= cl(App\Test\Test::class)->html() ?>
    </div>
    <div class="col-md-4 select">
        <!-- Custom attribute: Event handler on DOM node. -->
        <select class="form-select form-control" <?php
                echo attr()->on('change', rq(App\Test\Test::class)->setColor(jq()->val())) ?>>
            <option value="black" selected="selected">Black</option>
            <option value="red">Red</option>
            <option value="green">Green</option>
            <option value="blue">Blue</option>
        </select>
    </div>
    <div class="col-md-8 buttons" <?= attr()->bind(rq(App\Test\Buttons::class)) ?>>
    </div>

    <div class="col-md-12" <?= attr()->bind(rq(Ext\Test\Test::class)) ?>>
        Initial content : <?= cl(Ext\Test\Test::class)->html() ?>
    </div>
    <div class="col-md-4 select">
        <!-- Custom attribute: Event handler on DOM node. -->
        <select class="form-select form-control" <?php
                echo attr()->on('change', rq(Ext\Test\Test::class)->setColor(jq()->val())) ?>>
            <option value="black" selected="selected">Black</option>
            <option value="red">Red</option>
            <option value="green">Green</option>
            <option value="blue">Blue</option>
        </select>
    </div>
    <div class="col-md-8 buttons" <?= attr()->bind(rq(Ext\Test\Buttons::class)) ?>>
    </div>
</div>

The exported classes

The Jaxon library config

The Jaxon setup code.


<?php

jaxon()->app()->setup(configFile('events.php'));
The Javascript code is generated from this PHP template.


jaxon.dom.ready(() => {
    <?= rq(App\Test\Test::class)->sayHello(true) ?>;
    <?= rq(Ext\Test\Test::class)->sayHello(true) ?>;
});