Trigger reflexes without writing any javascript with the data-reflex attribute.
<!-- index.html.erb -->\n<a\n href=\"#\"\n data-reflex=\"click->CounterReflex#increment\"\n data-step=\"1\"\n data-count=\"<%= @count.to_i %>\"\n >Increment <%= @count.to_i %></a\n>\n# counter_reflex.rb\nclass CounterReflex < StimulusReflex::Reflex\n def increment\n @count = element.dataset[:count].to_i + element.dataset[:step].to_i\n end\nend\nStimulus.js controllers registered with StimulusReflex can use the stimulate method to trigger reflexes
<!-- index.html.erb -->\n<a href=\"#\"\n data-controller=\"counter\"\n data-action=\"click->counter#increment\"\n>Increment <%= @count %></a>\n// counter_controller.js\nimport { Controller } from 'stimulus'\nimport StimulusReflex from 'stimulus_reflex'\n\nexport default class extends Controller {\n connect() {\n StimulusReflex.register(this)\n }\n\n increment(event) {\n event.preventDefault()\n this.stimulate('Counter#increment', 1)\n }\n}\n# counter_reflex.rb\nclass CounterReflex < StimulusReflex::Reflex\n def increment(step = 1)\n session[:count] = session[:count].to_i + step\n end\nend\nInstead of refreshing the entire page, you can specify a portion of the page to update with morph(selector, content)
<!-- show.html.erb -->\n<header data-reflex=\"click->Example#change\">\n <%= render partial: \"path/to/foo\", locals: {message: \"Am I the medium or the massage?\"} %>\n</header>\n<!-- _foo.html.erb -->\n<div id=\"foo\">\n <span class=\"spa\"><%= message %></span>\n</div>\n# example_reflex.rb\nclass ExampleReflex < ApplicationReflex\n def change\n morph \"#foo\", \"Your muscles... they are so tight.\"\n end\nend\nUse morph :nothing in reflexes that do something on the server without updating the client.
# example_reflex.rb\nclass ExampleReflex < ApplicationReflex\n def change\n LongRunningJob.perform_later\n morph :nothing\n end\nend\nReflex classes can use the following callbacks. Full Docs
\n\nbefore_reflexaround_reflexafter_reflexStimulusReflex controllers automatically support five generic lifecycle callback methods.
\n\nbeforeReflex(element, reflex, noop, reflexId) prior to sending a request over the web socketreflexSuccess(element, reflex, noop, reflexId) after the server side Reflex succeeds and the DOM has been updatedreflexError(element, reflex, error, reflexId) whenever the server side Reflex raises an errorreflexHalted(element, reflex, noop, reflexId) reflex canceled with throw :abort in the before_reflex callbackafterReflex(element, reflex, noop, reflexId) after both success and errorfinalizeReflex(element, reflex, noop, reflexId) after both success and errorStimulusReflex controllers can define up to five custom lifecycle callback methods for each Reflex action. These methods use a naming convention based on the name of the Reflex. e.g. for the add_one reflex:
beforeAddOne(element, reflex, noop, reflexId)addOneSuccess(element, reflex, noop, reflexId)addOneError(element, reflex, error, reflexId)addOneHalted(element, reflex, noop, reflexId)afterAddOne(element, reflex, noop, reflexId)finalizeAddOne(element, reflex, noop, reflexId)If you need to know when a Reflex method is called, but you’re working outside of the Stimulus controller that initiated it, you can subscribe to receive DOM events
\n\nstimulus-reflex:beforestimulus-reflex:successstimulus-reflex:errorstimulus-reflex:haltedstimulus-reflex:afterThere are also events related to the StimulusReflex library setting up and connecting to ActionCable
\n\nstimulus-reflex:connectedstimulus-reflex:disconnectedstimulus-reflex:rejectedstimulus-reflex:readyIf a Reflex is called on a form element - or a child of that form element - then the data for the whole form will be properly serialized and made available to the Reflex action method as the params accessor. Read more
stimulate() method returns a promise
this.stimulate('Comments#create')\n .then(() => this.doSomething())\n .catch(() => this.handleError())\nYou can use the data-reflex-dataset=\"combined\" directive to scoop all data attributes up the DOM hierarchy and pass them as part of the Reflex payload.
<!-- new.html.erb -->\n<div data-post-id=\"<%= @post.id %>\">\n <div data-category-id=\"<%= @category.id %>\">\n <button data-reflex=\"click->Comment#create\" data-reflex-dataset=\"combined\">Create</button>\n </div>\n</div>\n# comment_reflex.rb\nclass CommentReflex < ApplicationReflex\n def create\n puts element.dataset[\"post-id\"]\n puts element.dataset[\"category-id\"]\n end\nend\nInstead of updating your entire page, you can specify exactly which parts of the DOM will be updated using the data-reflex-root attribute. Full docs
<!-- index.html.erb -->\n<div data-reflex-root=\"[forward],[backward]\">\n <input type=\"text\" value=\"<%= @words %>\" data-reflex=\"keyup->Example#words\">\n <div forward><%= @words %></div>\n <div backward><%= @words&.reverse %></div>\n</div>\n# example_reflex.rb\n def words\n @words = element[:value]\n end\nAdd data-reflex-permanent to any element in your DOM, and it will be left unchanged by full-page Reflex updates and morph calls that re-render partials.
\n\n<!-- index.html.erb -->\n<div data-reflex-permanent>\n <iframe src=\"https://ghbtns.com/github-btn.html?user=hopsoft&repo=stimulus_reflex&type=star&count=true\" frameborder=\"0\" scrolling=\"0\" class=\"ghbtn\"></iframe>\n <iframe src=\"https://ghbtns.com/github-btn.html?user=hopsoft&repo=stimulus_reflex&type=fork&count=true\" frameborder=\"0\" scrolling=\"0\" class=\"ghbtn\"></iframe>\n</div>\ncall raise :abort within a reflex method to cancel it.
# comment_reflex.rb\nclass CommentReflex < ApplicationReflex\n def create\n raise :abort\n end\nend\nstimulus-reflex
+
+
+
+
+
+ StimulusReflex
+
+
+
+
+
+
+
@@ -628,22 +646,6 @@ gtag('config','UA-106902774-1');
-
-
-
- jest
-
-
-
-
-
- Jest
-
-
-
-
@@ -1634,6 +1636,8 @@ gtag('config','UA-106902774-1');
+
+
@@ -2430,6 +2434,8 @@ gtag('config','UA-106902774-1');
+
+
@@ -3169,6 +3175,8 @@ gtag('config','UA-106902774-1');
+
+
@@ -4080,6 +4088,8 @@ gtag('config','UA-106902774-1');
+
+
@@ -5187,6 +5197,8 @@ gtag('config','UA-106902774-1');
+
+
@@ -6131,6 +6143,8 @@ gtag('config','UA-106902774-1');
+
+
@@ -7042,6 +7056,8 @@ gtag('config','UA-106902774-1');
+
+
@@ -7833,6 +7849,8 @@ gtag('config','UA-106902774-1');
+
+
@@ -8866,6 +8884,8 @@ gtag('config','UA-106902774-1');
+
+
@@ -9595,6 +9615,8 @@ gtag('config','UA-106902774-1');
+
+
@@ -10585,6 +10607,8 @@ gtag('config','UA-106902774-1');
+
+
@@ -11346,6 +11370,8 @@ gtag('config','UA-106902774-1');
+
+
@@ -12255,6 +12281,8 @@ gtag('config','UA-106902774-1');
+
+
@@ -14032,6 +14060,8 @@ gtag('config','UA-106902774-1');
+
+
+
+ stimulus-reflex
+
+
+
+
+
+ StimulusReflex
+
+
+
+
+
+
+
@@ -23398,6 +23466,8 @@ gtag('config','UA-106902774-1');
+
+
@@ -24031,6 +24101,8 @@ gtag('config','UA-106902774-1');
+
+
@@ -25072,6 +25144,8 @@ gtag('config','UA-106902774-1');
+
+
@@ -26276,6 +26350,8 @@ gtag('config','UA-106902774-1');
+
+
-
+
diff --git a/index@2016.html b/index@2016.html
index 6c7fbe2f5..3b4159d8f 100644
--- a/index@2016.html
+++ b/index@2016.html
@@ -33,8 +33,8 @@
-
-
+
+
@@ -90,9 +90,9 @@ gtag('config','UA-106902774-1');
-
-
-
+
+
+
global scope.
- placeholder='Search 351+ cheatsheets'
+ placeholder='Search 352+ cheatsheets'
>
@@ -317,7 +317,7 @@ the global scope.
- Over 351 curated cheatsheets, by developers for developers.
+ Over 352 curated cheatsheets, by developers for developers.
@@ -535,7 +535,7 @@ function n(n,t,e){n.addEventListener?n.addEventListener(t,e):n.attachEvent("on"+
},{}],"eoMl":[function(require,module,exports) {
"use strict";var e=u(require("./wrapify")),d=u(require("dom101/add-class")),t=u(require("dom101/on"));function u(e){return e&&e.__esModule?e:{default:e}}var a,o=document.querySelector("[data-js-main-body]");function r(){a||((0,d.default)(document.documentElement,"LoadDone"),a=!0)}o&&((0,e.default)(o),(0,d.default)(o,"-wrapified")),(0,t.default)(window,"load",r),setTimeout(r,5e3);
},{"./wrapify":"hE9p","dom101/add-class":"G20n","dom101/on":"DJ2P"}]},{},["eoMl"], null)
-
+
diff --git a/jsdoc.html b/jsdoc.html
index 1db543b5f..e228bc6bd 100644
--- a/jsdoc.html
+++ b/jsdoc.html
@@ -33,8 +33,8 @@
-
-
+
+
@@ -99,11 +99,11 @@ gtag('config','UA-106902774-1');
@@ -410,7 +410,7 @@ function test(x) {}
- placeholder='Search 351+ cheatsheets'
+ placeholder='Search 352+ cheatsheets'
>
@@ -435,7 +435,7 @@ function test(x) {}
- Over 351 curated cheatsheets, by developers for developers.
+ Over 352 curated cheatsheets, by developers for developers.
@@ -653,7 +653,7 @@ function n(n,t,e){n.addEventListener?n.addEventListener(t,e):n.attachEvent("on"+
},{}],"eoMl":[function(require,module,exports) {
"use strict";var e=u(require("./wrapify")),d=u(require("dom101/add-class")),t=u(require("dom101/on"));function u(e){return e&&e.__esModule?e:{default:e}}var a,o=document.querySelector("[data-js-main-body]");function r(){a||((0,d.default)(document.documentElement,"LoadDone"),a=!0)}o&&((0,e.default)(o),(0,d.default)(o,"-wrapified")),(0,t.default)(window,"load",r),setTimeout(r,5e3);
},{"./wrapify":"hE9p","dom101/add-class":"G20n","dom101/on":"DJ2P"}]},{},["eoMl"], null)
-
+
diff --git a/jshint.html b/jshint.html
index d324aaa37..013f580f2 100644
--- a/jshint.html
+++ b/jshint.html
@@ -33,8 +33,8 @@
-
-
+
+
@@ -99,11 +99,11 @@ gtag('config','UA-106902774-1');
@@ -380,7 +380,7 @@ function() { ... } // err: need "use strict"
- placeholder='Search 351+ cheatsheets'
+ placeholder='Search 352+ cheatsheets'
>
@@ -405,7 +405,7 @@ function() { ... } // err: need "use strict"
- Over 351 curated cheatsheets, by developers for developers.
+ Over 352 curated cheatsheets, by developers for developers.
@@ -623,7 +623,7 @@ function n(n,t,e){n.addEventListener?n.addEventListener(t,e):n.attachEvent("on"+
},{}],"eoMl":[function(require,module,exports) {
"use strict";var e=u(require("./wrapify")),d=u(require("dom101/add-class")),t=u(require("dom101/on"));function u(e){return e&&e.__esModule?e:{default:e}}var a,o=document.querySelector("[data-js-main-body]");function r(){a||((0,d.default)(document.documentElement,"LoadDone"),a=!0)}o&&((0,e.default)(o),(0,d.default)(o,"-wrapified")),(0,t.default)(window,"load",r),setTimeout(r,5e3);
},{"./wrapify":"hE9p","dom101/add-class":"G20n","dom101/on":"DJ2P"}]},{},["eoMl"], null)
-
+
diff --git a/knex.html b/knex.html
index b2baa4e31..7ce492064 100644
--- a/knex.html
+++ b/knex.html
@@ -33,8 +33,8 @@
-
-
+
+
@@ -99,11 +99,11 @@ gtag('config','UA-106902774-1');
@@ -716,7 +716,7 @@ knex migrate:rollback --env production
- placeholder='Search 351+ cheatsheets'
+ placeholder='Search 352+ cheatsheets'
>
@@ -741,7 +741,7 @@ knex migrate:rollback --env production
- Over 351 curated cheatsheets, by developers for developers.
+ Over 352 curated cheatsheets, by developers for developers.
@@ -929,7 +929,7 @@ function n(n,t,e){n.addEventListener?n.addEventListener(t,e):n.attachEvent("on"+
},{}],"eoMl":[function(require,module,exports) {
"use strict";var e=u(require("./wrapify")),d=u(require("dom101/add-class")),t=u(require("dom101/on"));function u(e){return e&&e.__esModule?e:{default:e}}var a,o=document.querySelector("[data-js-main-body]");function r(){a||((0,d.default)(document.documentElement,"LoadDone"),a=!0)}o&&((0,e.default)(o),(0,d.default)(o,"-wrapified")),(0,t.default)(window,"load",r),setTimeout(r,5e3);
},{"./wrapify":"hE9p","dom101/add-class":"G20n","dom101/on":"DJ2P"}]},{},["eoMl"], null)
-
+
diff --git a/koa.html b/koa.html
index ce49e95d4..7b21a5713 100644
--- a/koa.html
+++ b/koa.html
@@ -33,8 +33,8 @@
-
-
+
+
@@ -90,9 +90,9 @@ gtag('config','UA-106902774-1');
-
-
-
+
+
+