From 626a01e04722658331ca21e81d5c5ccdc048f5a6 Mon Sep 17 00:00:00 2001
From: Jessica Jordan <jessica.jordan.fe.dev@gmail.com>
Date: Tue, 17 Apr 2018 22:35:35 +0200
Subject: [PATCH 1/2] feat(example): adds example for blur events + class name
 bindings

---
 ...nent-that-updates-props-through-blur-events.js | 12 ++++++++++++
 app/router.js                                     |  1 +
 app/templates/application.hbs                     |  1 +
 ...ent-that-updates-props-through-blur-events.hbs |  9 +++++++++
 app/templates/example6.hbs                        | 15 +++++++++++++++
 5 files changed, 38 insertions(+)
 create mode 100644 app/components/component-that-updates-props-through-blur-events.js
 create mode 100644 app/templates/components/component-that-updates-props-through-blur-events.hbs
 create mode 100644 app/templates/example6.hbs

diff --git a/app/components/component-that-updates-props-through-blur-events.js b/app/components/component-that-updates-props-through-blur-events.js
new file mode 100644
index 0000000..576c985
--- /dev/null
+++ b/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');
+    },
+  },
+});
diff --git a/app/router.js b/app/router.js
index f36a63e..872beac 100644
--- a/app/router.js
+++ b/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;
diff --git a/app/templates/application.hbs b/app/templates/application.hbs
index 9e5bb7f..0eeccd3 100644
--- a/app/templates/application.hbs
+++ b/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 />
 
diff --git a/app/templates/components/component-that-updates-props-through-blur-events.hbs b/app/templates/components/component-that-updates-props-through-blur-events.hbs
new file mode 100644
index 0000000..c61b8e4
--- /dev/null
+++ b/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"}}/>
diff --git a/app/templates/example6.hbs b/app/templates/example6.hbs
new file mode 100644
index 0000000..fdea0cb
--- /dev/null
+++ b/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}}

From bf1c0331075408630169324978224ccd3fec7ceb Mon Sep 17 00:00:00 2001
From: Jessica Jordan <jessica.jordan.fe.dev@gmail.com>
Date: Tue, 17 Apr 2018 22:38:38 +0200
Subject: [PATCH 2/2] doc(example): add blur event example to README

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index 390db9a..5ada4ef 100644
--- a/README.md
+++ b/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.