Stimulus 2.0 values on a target (replacing dataset)?

1

The documentation shows data-controllername-valuename-value="thevalue" only on the html element defining the controller.

What I’m trying to do is replace a data-valuename="thevalue" on a number of targets and access each when processing the given target.

It doesn’t seem to be possible though… does this mean, I should stay with the dataset.valuename access for targets?

With an interaction defined like so

/ apologies - long lines
div data-controller="dependent-form-items"
  .ml__feedback-field
    = f.check_box :negative_experience_checkbox,  class: 'ml__feedback-checkbox', data: { action: "click->dependent-form-items#toggleCheck"}
    = f.label :negative_experience_checkbox, "I had a negative experience", class: 'ml__feedback-label'

  .field.field--indented data-dependent-form-items-target="dependent" data-show-if="1" data-dependent-form-items-show-if-value="1"
    = f.label :negative_experience, "Please provide details", class: "label"
    = f.text_area :negative_experience, size: "60x3"

and controller

...
  static values = { showIf: String }
...
  toggleCheck() {

      this.dependentTargets.forEach((el) => {

        // possible to access el.dataset.showIf
        // not possible to access el.showIfValue
        if ( el.dataset.showIf.split(' ').includes(event.currentTarget.value) && event.currentTarget.checked ) {
          el.classList.remove('hidden')
        } else {
          el.classList.add('hidden')
        }
      })

    } // toggleCheck

Am I missing something or is this not intended to work on targets?

2

This is intentional and the values are intended to be defined on the controller element. You can use the the data attributes on your target elements and access them by fetching the target and the dataset object.

3

Thank you, this makes sense.

So, the controller values are there as a more centralized & standardized data store?

4

Correct. the controller is also responsible to listen on changes to the values and trigger [name]ValueChanged and has[name]Value functions. Managing those only on the controller element simplifies it significantly.

5

We considered adding a pattern for per-element values as well under the idea of “parameters”. But yeah, for now you have to do it by hand.