Remove jQuery from component lifecycle #200
Conversation
| @@ -246,7 +247,7 @@ export default Component.extend({ | |||
|
|
|||
| didRender() { | |||
| this._super(...arguments); | |||
| this.$('.item-list').scrollTop(this.$('.selected-item').position().top); | |||
| this.element.querySelector('.item-list').scrollTop = this.element.querySelector('.selected-item').offsetTop); | |||
There was a problem hiding this comment.
I'm not sure this works, as offsetTop will use the document or nearest positioned element. Not sure you can assume that the .item-list would be positioned. Here is how I tackled this:
const scrollTarget = Math.abs(this.element.getBoundingClientRect().top - this.element.querySelector('.selected-item').getBoundingClientRect().top);
this.element.querySelector('.item-list').scrollTop = scrollTarget;
Here is a code pen illustrating...
https://codepen.io/kamry-bowman/pen/MPJaRo?editors=1011
| @@ -272,8 +273,8 @@ import Component from '@ember/component'; | |||
|
|
|||
| export default Component.extend({ | |||
| willDestroyElement() { | |||
| this.$().off('animationend'); | |||
| this.$('input.date').myDatepickerLib().destroy(); | |||
| this.element.removeEventListener('animationend'); | |||
There was a problem hiding this comment.
I think removeEventListener takes a second argument, which needs to be a function reference. This poses a problem, as we would need to have a reference to the original function we put on the element with addEventListener. Don't know how we want to handle that?
There was a problem hiding this comment.
You're absolutely right. I think we could get away with just creating the handler in the example that adds the event listener, and just using that in this sample. The samples in this file aren't really connected as a whole, so we can probably get away with some "cheating".
| @@ -200,7 +201,7 @@ There are a few things to note about the `didInsertElement()` hook: | |||
| particularly when order of execution is important. | |||
|
|
|||
| [did-insert-element]: https://www.emberjs.com/api/ember/release/classes/Component/events/didInsertElement?anchor=didInsertElement | |||
| [dollar]: https://www.emberjs.com/api/ember/release/classes/Component/methods/$?anchor=%24 | |||
| [element]: https://emberjs.com/api/ember/3.4/classes/Component/properties/element?anchor=element | |||
There was a problem hiding this comment.
Can you change this link to use /release/ instead of /3.4/ in the url? Thanks!
|
Hi! This PR was still open as of creating the 3.5 release. This means before this PR to be merged, any changes requested should be made, and then the same additions should be applied to the upcoming 3.5 version files. They will be available later this week. Sorry about the extra step! |
|
Don't worry about the extra step, I cause some extra steps for you when not commenting on the issues too! I'll make a Twiddle to show that it all works, and then wait for the 3.5 files to land. |
|
@jkarsrud The 3.5 files are up. Thanks! |
|
@jkarsrud hey, do you still want to make these last changes and add them to |
jkarsrud
force-pushed
the
remove-jquery-component-lifecycle
branch
from
eef5b38
to
1681b33
Compare
|
@jenweber Sorry about the delay. I've updated the exaples and copied the changes over to the 3.5.0 files. Maybe you want me to revert the 3.4.0 files, so that we only update the released guides? I have also made an Ember Twiddle that shows that some of these things work as expected: https://ember-twiddle.com/c8c9f62aa2bc9f7807edf89f8b246bfe?numColumns=2&openFiles=components.my-component.js%2Ctemplates.components.my-component.hbs I will update the twiddle with an example component for the more complex examples we have in these files. Let me know if there's anything else you want me to do in this PR! |
|
The Twiddle is updated with working examples for "everything" now. While implementing those examples, I noticed that the code actually didn't work as expected, but I'm not sure the fix is what we should be showing in these examples... |
|
This is awesome, thank you! I appreciate the Twiddles. Merged. |
* Remove jQuery references from the didInsertElement section * Remove jQuery reference from didRender section * Remove jQuery from willDestroyElement section * Use release URL for element property * Give datepicker example a more sensible API * Copy changes from 3.4.0 to 3.5.0 * Update selected-item-list example
This fixes #197, fixes #198 and fixes #199.
I'm not 100% sure if we should be using the date picker example anymore, but I kept it as a straight conversion right now in order for the diffs to be easier to see and review.