Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

feat(jqLite): provide support for element.one() #5269

Closed
wants to merge 1 commit into from
Closed

feat(jqLite): provide support for element.one() #5269

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions src/jqLite.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@
* - [`next()`](http://api.jquery.com/next/) - Does not support selectors
* - [`on()`](http://api.jquery.com/on/) - Does not support namespaces, selectors or eventData
* - [`off()`](http://api.jquery.com/off/) - Does not support namespaces or selectors
* - [`one()`](http://api.jquery.com/one/) - Does not support namespaces or selectors
* - [`parent()`](http://api.jquery.com/parent/) - Does not support selectors
* - [`prepend()`](http://api.jquery.com/prepend/)
* - [`prop()`](http://api.jquery.com/prop/)
Expand Down Expand Up @@ -744,6 +745,19 @@ forEach({

off: jqLiteOff,

one: function(element, type, fn) {
element = jqLite(element);

//add the listener twice so that when it is called
//you can remove the original function and still be
//able to call element.off(ev, fn) normally
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure I understand the reasoning for this, it doesn't appear to happen in jQuery, and element.off() shouldn't throw if it can't find the handler anyways right?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you call $(elm).one(ev, fn) and then $(elm).off(ev, fn) in jQuery then that works (it removes the event). If you only stuck to having one listener (by doing on() inside of this function) then $(elm).off(ev, fn) won't find the matching fn function since you used your own internal function.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Right but what I mean is, does it really matter if .off() doesn't find the matching fn? I'm not sure I understand what this breaks (reading the jQuery code I don't see it adding the unwrapped function if one===1)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It doesn't matter if you do off(ev), but if you do off(ev, fn) and it doesn't find the matching fn then it isn't actually removing the event listener now is it? We didn't want to rip open the existing jqLite.on() method to pass in another param like jQuery does.

It doesn't break anything, but if you're a developer adding one() and then off() right after on the same event + callback pair and it's not getting removed then it isn't working as you expect it to.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But I just mean, it wasn't added in the first place --- therefore what difference does it really make if it wasn't removed? that's the part I don't get. It's clear that this is making sense to you so I think I will have to accept that, but it just seems weird to me!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@caitp I'm planning on merging this in today. Could you hop onto the hangouts chat so I can understand what you mean here?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sure, but it's really just me not completely understanding the need to bind both events.

Wouldn't it be just as well to bind only one function to wrap the passed in function?

  one: function(element, type, fn) {
    jqLite(element).on(type, function wrapperFn(e) {
      // unbind first --- this way, if fn() binds the event again, we don't undo their work
      element.off(e.type, wrapperFn);
      fn.apply(this, arguments);
    });
  }

In my mind this should work and be a bit simpler, it probably doesn't make much difference so it just seemed unclear to me and I wanted to hear what the reasoning was for it -- the only reason I can think of really is the ordering of the unbinding, but that seems unlikely to break anything

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here lies the problem. If we delegate one() directly to on() then how can we specifically remove the event created by one() (type + fn) from the element?

This won't work:

element.one('click', clickFn);
element.off('click', clickFn);

Can you see why?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay, I see what you're getting at. Thanks for the explanation

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok cool. Merging.

element.on(type, function onFn() {
element.off(type, fn);
element.off(type, onFn);
});
element.on(type, fn);
},

replaceWith: function(element, replaceNode) {
var index, parent = element.parentNode;
jqLiteDealoc(element);
Expand Down
57 changes: 57 additions & 0 deletions test/jqLiteSpec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1177,6 +1177,63 @@ describe('jqLite', function() {
}
});

describe('one', function() {

it('should only fire the callback once', function() {
var element = jqLite(a);
var spy = jasmine.createSpy('click');

element.one('click', spy);

browserTrigger(element, 'click');
expect(spy).toHaveBeenCalledOnce();

browserTrigger(element, 'click');
expect(spy).toHaveBeenCalledOnce();
});

it('should deregister when off is called', function() {
var element = jqLite(a);
var spy = jasmine.createSpy('click');

element.one('click', spy);
element.off('click', spy);

browserTrigger(element, 'click');
expect(spy).not.toHaveBeenCalled();
});

it('should return the same event object just as on() does', function() {
var element = jqLite(a);
var eventA, eventB;
element.on('click', function(event) {
eventA = event;
});
element.one('click', function(event) {
eventB = event;
});

browserTrigger(element, 'click');
expect(eventA).toEqual(eventB);
});

it('should not remove other event handlers of the same type after execution', function() {
var element = jqLite(a);
var calls = [];
element.one('click', function(event) {
calls.push('one');
});
element.on('click', function(event) {
calls.push('on');
});

browserTrigger(element, 'click');
browserTrigger(element, 'click');

expect(calls).toEqual(['one','on','on']);
});
});


describe('replaceWith', function() {
it('should replaceWith', function() {
Expand Down