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. 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}}]
+ You'll see + "Assertion Failed: You modified "propSetOnBlur" twice on <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. +
+ ++ To avoid this error, don't update properties of classNameBindings through blur events +
+