data-reflexand programmatic e.g.
stimulate()mechanisms for initiating a Reflex on the client work without modification.
morphis only available in Reflex classes, not controller actions. Once you change modes, you cannot change between them.
morphin your Reflex.
@stimulus_reflexvariable that is set to
truewhen a controller action is being run by a Reflex.
data-reflex-root=".class, #id, [attribute]"
data-reflex-rooton the element with the
data-reflex-rooton an ancestor element above the element in the DOM? It could be the element's immediate parent, but it doesn't have to be.
data-reflex-permanentto any element in your DOM, and it will be left unchanged by full-page Reflex updates and
morphcalls that re-render partials. Note that
morphcalls which insert simple strings or empty values do not respect the
renderto regenerate a partial or even connect it to a ViewComponent.
divknown colloquially as #foo.
foopartial. It is an example of perfection:
morphmethod. In its simplest form, it takes two parameters: selector and html. We pass any valid CSS DOM selector that returns a reference to the first matching element, as well as the value we're updating it with.
headerhas gained some attributes. This is just how StimulusReflex makes the magic happen.
outerHTML) consider targeting the parent of the element you need to change. You could, for example, call
morph "header", "No more #foo."and start fresh.
renderhas been delegated to the controller class responsible for rendering the current page. Of course, you're still free to use
ApplicationControlleror any other ActionDispatch controller to render your content.
foopartial (listed in the Tutorial section above) is an example of a best practice for several subtle but important reasons which you should use to model your own updates:
morphwill treat these updates slightly differently:
data-reflex-permanentattribute will be over-written
data-reflex-permanentis ignored. (Sorry! We just work here.)
spanelement node. All set... except that you changed #foo to #baz.
morphcalls used CableReady
inner_htmloperations to update the divs. While this might be fine for some applications,
inner_htmlcompletely wipes out any Stimulus controllers present in the replaced DOM hierarchy and doesn't respect the
data-reflex-permanentattribute. How can we adapt this so that both
morphoperations are performed by the
paginatorpartial is only rendered one time, so this one is easy: we have to move the top-level div into the partial. When it gets re-rendered, it will automatically match what
morphneeds to update the contents because it is the contents:
postspartial (not listed) is rendered as a collection, and so it must be handled differently. You cannot put the top-level div into each element of the collection!
rendercall itself with markup for the top-level div:
postsare being updated using
morphmultiple times in your Reflex action method.
morphoperation instead of an
rails generate channel countershould do the trick. We want to stream updates to anyone listening in on the
buttonto launch the Reflex as well as a
spanto hold the current value. We'll pull in the current value of the counter key in the Rails cache. If it doesn't yet exist, set the value to 0.