Is Stimulus worth using for simple class functions?

1

I’ve recently implemented Stimulus on a project and I’m still trying to figure out when to use it, and when to just use regular JS/JQuery. One example of this is I have many tables throughout my app which have checkboxes at the start of each row. In the checkbox column in the table header I have a checkbox which checks/unchecks every checkbox in the table. Currently I’m doing this with a simple function attached to a class:

const bindAllChecks = function() {
  $(".select-all-check").change(function() {
    var checks = $(this).closest("table").find(".multiple-check");

    if (this.checked) {
      checks.prop("checked", true).change();
    } else {
      checks.prop("checked", false).change();
    }
  });
};

The Stimulus documentation seems to be encouraging me to move this into Stimulus, but that would involve not just adding a controller, but adding a data-controller, data-target and data-action to every single instance of a checkbox table, which isn’t very DRY.

So my question is, is it worth using Stimulus for cases like this or is it better to mix Stimulus with plain JS files?

2

Hey Danny!
As for me, I prefer to do everything via Stimulus controllers. I convince myself that it makes my code cleaner, cause I just have only one way to iteract with DOM elements. And I like the way Stimulus does it for me.

And moreover, Stimulus gives me instruments to do anything I would want with DOM, and I don’t need jQuery anymore.

1 Like
3

You could move this to a single ‘check-binding-controller.js’ file in stimulus, and copy-and-paste that function into the ‘connect’ method. The primary advantage you’re getting is that you now have one compact file dedicated to that function, one which you can now easily drop into other applications as you like as it’s own file.

If you added as a data-controller to each check button and modifying the code to just modify the checkbox to which it’s attached you’d also gain the advantages of having it auto-bind when inserting new ones dynamically and also having each one function with it’s own instance of the code.