This example shows how to dynamically bind a component to a DOM node.
Bind a component
The HTML code.
<div class="row">
<div class="col-md-12" id="hello-text-two">
</div>
<div class="col-md-4 select">
<select class="form-select form-control" id="colorselect" name="colorselect" <?= attr()
->on('change', rq('HelloWorld')->setColor(Jaxon\select('colorselect'))) ?>>
<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">
<button type="button" class="btn btn-primary" <?= attr()
->click(rq('HelloWorld')->sayHello(1)) ?> >CLICK ME</button>
<button type="button" class="btn btn-primary" <?= attr()
->click(rq('HelloWorld')->sayHello(0)) ?> >Click Me</button>
</div>
</div>
The Jaxon setup code.
<?php
use Jaxon\App\FuncComponent;
use Jaxon\App\NodeComponent;
class HelloText extends NodeComponent
{
public function html(): string
{
return $this->stash()->get('is_caps') ? 'HELLO WORLD!' : 'Hello World!';
}
}
class HelloWorld extends FuncComponent
{
public function sayHello(bool $isCaps)
{
$this->stash()->set('is_caps', $isCaps);
$this->response()->bind('hello-text-two', rq(HelloText::class));
$this->cl(HelloText::class)->render();
}
public function setColor(string $sColor)
{
$this->response()->assign('hello-text-two', 'style.color', $sColor);
}
}
// Register object
$jaxon = jaxon();
$jaxon->app()->setup(configFile('class.php'));
// Js options
$jaxon->setOptions(['lib' => ['uri' => '/js'], 'app' => ['minify' => false]], 'js');
$jaxon->register(Jaxon\Jaxon::CALLABLE_CLASS, HelloText::class);
The Javascript code is generated from this PHP template.
jaxon.dom.ready(() => {
// Call the HelloWorld class to populate the 2nd div
<?= rq('HelloWorld')->sayHello(0) ?>;
// call the HelloWorld->setColor() method on load
<?= rq('HelloWorld')->setColor(Jaxon\select('colorselect')) ?>;
});