Examples
The examples directory is the practical companion to this guide. Each page exists to demonstrate a specific Flux behaviour in a real browser.
Example list
- example/01-counter.php: a minimal background form submission with preserved textarea state
- example/02-list.php:
update-inneron a form containing a dynamic list - example/03-multiple-forms.php: several targets refreshed from the same response
- example/04-links.php: link navigation mixed with local card updates
- example/04a-page1.php: first linked page for the navigation demo
- example/04b-page2.php: second linked page for the navigation demo
- example/05-live-clock.php: live polling with
data-flux-rate - example/06-drag-order.php: server-rendered list ordering enhanced with
data-flux="drag-order"
Browser tests
The Behat features mirror those examples closely:
- test/behat/01-counter.feature
- test/behat/02-list.feature
- test/behat/03-multiple-forms.feature
- test/behat/04-links.feature
- test/behat/05-live-clock.feature
- test/behat/06-drag-order.feature
These tests are especially useful when we want to confirm the intended behaviour of a directive before changing the library.
Running the suites
npm test
composer behat
The unit tests cover the JavaScript classes directly, while the Behat suite verifies that the examples behave correctly in a browser.
Next up
If we want the full directive list in one place, finish with List of flux attributes. Otherwise, head back to Home and follow the guide again from the beginning.