Jaxon View for Blade
Render Blade templates in Jaxon applications., (*1)
Installation
Install this package with Composer., (*2)
"require": {
"jaxon-php/jaxon-blade": "^5.0"
}
Usage
For each directory containing Blade templates, add an entry to the app.views section in the configuration., (*3)
'app' => [
'views' => [
'demo' => [
'directory' => '/path/to/demo/views',
'extension' => '.blade.php',
'renderer' => 'blade',
],
],
],
In the following example, the DOM element with id content-id is assigned the value of the /path/to/demo/views/sub/dir/file.blade.php template., (*4)
class MyClass extends \Jaxon\App\FuncComponent
{
public function action()
{
$this->response->html('content-id', $this->view()->render('demo::/sub/dir/file'));
}
}
Blade directives
This extension registers the following Blade directives to insert Jaxon js and css codes in the pages that need to show Jaxon related content., (*5)
// /path/to/demo/views/sub/dir/file.blade.php
@jxnCss()
</head>
<body>
</body>
@jxnJs()
@jxnScript()
Call factories
This extension registers the following Blade directives for Jaxon call factories functions., (*6)
[!NOTE]
In the following examples, the $rqAppTest template variable is set to the value rq(Demo\Ajax\App\AppTest::class)., (*7)
The jxnBind directive attaches a UI component to a DOM element, while the jxnHtml directive displays a component HTML code in a view., (*8)
<div class="col-md-12" @jxnBind($rqAppTest)>
@jxnHtml($rqAppTest)
</div>
The jxnPagination directive displays pagination links in a view., (*9)
<div class="col-md-12" @jxnPagination($rqAppTest)>
</div>
The jxnOn directive binds an event on a DOM element to a Javascript call defined with a call factory., (*10)
<select class="form-select"
@jxnOn('change', $rqAppTest->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>
The jxnClick directive is a shortcut to define a handler for the click event., (*11)
<button type="button" class="btn btn-primary"
@jxnClick($rqAppTest->sayHello(true))>Click me</button>
The jxnEvent directive defines a set of events handlers on the children of a DOM element, using jQuery selectors., (*12)
<div class="row" @jxnEvent([
['.app-color-choice', 'change', $rqAppTest->setColor(jq()->val())]
['.ext-color-choice', 'change', $rqExtTest->setColor(jq()->val())]
])>
<div class="col-md-12">
<select class="form-control app-color-choice">
<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-12">
<select class="form-control ext-color-choice">
<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>
The jxnEvent directive takes as parameter an array in which each entry is an array with a jQuery selector, an event and a call factory., (*13)
Contribute
- Issue Tracker: github.com/jaxon-php/jaxon-blade/issues
- Source Code: github.com/jaxon-php/jaxon-blade
License
The package is licensed under the BSD license., (*14)
Wallogit.com
