Add example for backtracking when a blur event sets a className bound property

README.md

@@ -7,6 +7,7 @@ So far it includes:
  * [Modifying an already rendered property in a component lifecycle hook](https://github.com/GavinJoyce/backtracking/pull/1)
  * [Calling a `set` within a `get`](https://github.com/GavinJoyce/backtracking/pull/5)
  * [Emitting an action on component init](https://github.com/GavinJoyce/backtracking/pull/6)
+ * [Setting a className bound property through blur events](https://github.com/GavinJoyce/backtracking/pull/13)
 
 I'll add more cases as I come across them in my own app. Please send a PR if you have additional cases.
 

app/components/component-that-updates-props-through-blur-events.js

@@ -0,0 +1,12 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  classNameBindings: ['propSetOnBlur'],
+  propSetOnChange: false,
+  propSetOnBlur: false,
+  actions: {
+    toggleProp() {
+      this.toggleProperty('propSetOnChange');
+    },
+  },
+});

app/router.js

@@ -12,6 +12,7 @@ Router.map(function() {
   this.route('example3');
   this.route('example4');
   this.route('example5');
+  this.route('example6');
 });
 
 export default Router;

app/templates/application.hbs

@@ -5,6 +5,7 @@
 [{{#link-to 'example3'}}Example 3{{/link-to}}]
 [{{#link-to 'example4'}}Example 4{{/link-to}}]
 [{{#link-to 'example5'}}Example 5{{/link-to}}]
+[{{#link-to 'example6'}}Example 6{{/link-to}}]
 
 <hr />
 

app/templates/components/component-that-updates-props-through-blur-events.hbs

@@ -0,0 +1,9 @@
+<label for="backtracking-checkbox">
+  Tick the box to trigger the backtracking re-render error
+</label>
+<input
+ id="backtracking-checkbox"
+ type="checkbox"
+ disabled={{propSetOnChange}}
+ onblur={{action (mut propSetOnBlur) true}}
+ onchange={{action "toggleProp"}}/>

app/templates/example6.hbs

@@ -0,0 +1,15 @@
+<div class="explain">
+  <p>
+    You'll see
+    "Assertion Failed: You modified "propSetOnBlur" twice on &lt;backtracking@component:component-that-updates-props-through-blur-events::ember411&rt; in a single render.
+    It was rendered in "component:component-that-updates-props-through-blur-events" and modified in "component:component-that-updates-props-through-blur-events".
+    This was unreliable and slow in Ember 1.x and is no longer supported.
+    See https://github.com/emberjs/ember.js/issues/13948 for more details."
+    in the console.
+  </p>
+
+  <p>
+    To avoid this error, don't update properties of classNameBindings through blur events
+  </p>
+</div>
+{{component-that-updates-props-through-blur-events}}