Route mutations to attributes and child lists like Events
Declare [data-mutation]
in the same style as [data-action]
.
<div data-controller="my-controller" data-mutation="aria-busy->controller#doSomethingAboutIt">
<!-- ... -->
</div>
<div data-controller="my-controller" data-mutation="aria-busy->controller#doSomethingAboutIt:!subtree">
<!-- ... -->
</div>
<div data-controller="my-controller" data-mutation="controller#doSomethingAboutIt:attributes">
<!-- ... -->
</div>
<div data-controller="my-controller" data-mutation="controller#doSomethingAboutIt:childList">
<!-- ... -->
</div>
<div data-controller="my-controller" data-mutation="controller#doSomethingAboutIt:childList:!subtree">
<!-- ... -->
</div>
<div data-controller="my-controller" data-mutation="controller#doSomethingAboutIt:attributes:childList">
<!-- ... -->
</div>
Declare attributeChanged
callback to listen for changes to the
element with [data-controller]
:
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
attributeChanged(attributeName, newValue, oldValue) {
// ...
}
}
Declare [name]TargetAttributeChanged
callback to listen for changes to an
element with [data-$IDENTIFIER-target~="name"]
:
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = ["observed"]
observedTagretAttributeChanged(target, attributeName, newValue, oldValue) {
// ...
}
}
import { Application } from "@hotwired/stimulus"
import { install } from "@seanpdoyle/stimulus-mutation"
const application = Application.start()
// ...
install(application)
[data-mutation]
by default, but can be overridden by passing { mutationAttribute: "..." }
to install
:
import { Application } from "@hotwired/stimulus"
import { install } from "@seanpdoyle/stimulus-mutation"
const application = Application.start()
// ...
install(application, { mutationAttribute: "data-mutation-routes" })