Organizing our Turbo Events Code

This Chapter isn't
quite ready...

Rest assured, the gnomes are hard at work
completing this video!

Browse Tutorials

Did you turbo drive to work super nicely. We're going to need to hook into a few turbo events like turbo:before-cache. Before we're done, we're going to hook into even more events to help us properly leverage JavaScript, widgets, add transitions, and do more craziness. When we talk about turbo frames. So instead of putting all that logic right here in app.js, let's organize a bit. There's no right or wrong way to do this, but let's create a class that holds all of this special turbo logic in the assets/ directory create a sub-directory called turbo/ inside a new file called turbo-helper.js. Inside here we say const TurboHelper = class {}. I won't give that class a constructor() {}. And the idea is that we can go back over here into app.js copy all of this code and paste

And knows when we did that, that important. It'd be modal up here for me. Now at the bottom of this, we'll actually export is export default new TurboHelper(). So this will instantiate a new instance of her object and export it. It won't really matter for us, but each time we import this module, we'll get the same one instance of this object back and app.js. I'm going to delete all of this code and then we'll import './turbo/turbo-helper'. I don't need to set that to any variable, just importing it is going to cause that object to be instantiated. And when that object is instantiated, it will register the event listener. So this should be enough to get it to work. Let's try it a refresh

Quick, remove on an item, go back forward and yep.

Everything still works. Now that we have a class, we can organize this a bit better.

Copy the modal code here. Remove that, create a new method down here called closeModal() and paste. Then up here inside of our terminal before cache call back, we'll say this.closeModal(). We'll do the same thing for squealer. Copy all of that sweet alert code,

But on here, create a new method called closeSweetalert() paste in call it up here. Okay.

After that, that does that pose. Well, this.closeSweetalert(), that looks better. And if we just go over here real quick, make sure that I didn't mess anything up. I click remove good back forward and yes, it still works. So next let's learn what types of things can go wrong when including a third party, JavaScript, widgets like an analytics with like analytics, JavaScript, or a cute little weather widget.

Leave a comment!

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": ">=7.4.0",
        "ext-ctype": "*",
        "ext-iconv": "*",
        "composer/package-versions-deprecated": "1.11.99.1", // 1.11.99.1
        "doctrine/annotations": "^1.0", // 1.13.1
        "doctrine/doctrine-bundle": "^2.2", // 2.3.2
        "doctrine/orm": "^2.8", // 2.9.1
        "phpdocumentor/reflection-docblock": "^5.2", // 5.2.2
        "sensio/framework-extra-bundle": "^6.1", // v6.1.4
        "symfony/asset": "5.3.*", // v5.3.0-RC1
        "symfony/console": "5.3.*", // v5.3.0-RC1
        "symfony/dotenv": "5.3.*", // v5.3.0-RC1
        "symfony/flex": "^1.3.1", // v1.13.3
        "symfony/form": "5.3.*", // v5.3.0-RC1
        "symfony/framework-bundle": "5.3.*", // v5.3.0-RC1
        "symfony/property-access": "5.3.*", // v5.3.0-RC1
        "symfony/property-info": "5.3.*", // v5.3.0-RC1
        "symfony/proxy-manager-bridge": "5.3.*", // v5.3.0-RC1
        "symfony/runtime": "5.3.*", // v5.3.0-RC1
        "symfony/security-bundle": "5.3.*", // v5.3.0-RC1
        "symfony/serializer": "5.3.*", // v5.3.0-RC1
        "symfony/twig-bundle": "5.3.*", // v5.3.0-RC1
        "symfony/ux-chartjs": "^1.1", // v1.3.0
        "symfony/ux-turbo": "^1.3", // v1.3.0
        "symfony/validator": "5.3.*", // v5.3.0-RC1
        "symfony/webpack-encore-bundle": "^1.9", // v1.11.2
        "symfony/yaml": "5.3.*", // v5.3.0-RC1
        "twig/extra-bundle": "^2.12|^3.0", // v3.3.1
        "twig/intl-extra": "^3.2", // v3.3.0
        "twig/string-extra": "^3.3", // v3.3.1
        "twig/twig": "^2.12|^3.0" // v3.3.2
    },
    "require-dev": {
        "doctrine/doctrine-fixtures-bundle": "^3.4", // 3.4.0
        "symfony/debug-bundle": "^5.2", // v5.3.0-RC1
        "symfony/maker-bundle": "^1.27", // v1.31.1
        "symfony/monolog-bundle": "^3.0", // v3.7.0
        "symfony/stopwatch": "^5.2", // v5.3.0-RC1
        "symfony/var-dumper": "^5.2", // v5.3.0-RC1
        "symfony/web-profiler-bundle": "^5.2", // v5.3.0-RC1
        "zenstruck/foundry": "^1.10" // v1.10.0
    }
}