Merge pull request twitter#65 from Tol1/fix-custom-event-args

Fix custom event arguments

doc/jquery_typeahead.md

@@ -212,16 +212,19 @@ a typeahead.
   occurred in.
 
 * `typeahead:select` – Fired when a suggestion is selected. The event handler 
-  will be invoked with 2 arguments: the jQuery event object and the suggestion
-  object that was selected.
+  will be invoked with 3 arguments: the jQuery event object, the suggestion
+  object that was selected, and the name of the dataset the suggestion belongs
+  to.
 
-* `typeahead:autocomplete` – Fired when a autocompletion occurs. The 
-  event handler will be invoked with 2 arguments: the jQuery event object and 
-  the suggestion object that was used for autocompletion.
+* `typeahead:autocomplete` – Fired when a autocompletion occurs. The event 
+  handler will be invoked with 3 arguments: the jQuery event object, the 
+  suggestion object that was used for autocompletion, and the name of the 
+  dataset the suggestion belongs to.
 
 * `typeahead:cursorchange` – Fired when the results container cursor moves. The 
-  event handler will be invoked with 2 arguments: the jQuery event object and 
-  the suggestion object that was moved to.
+  event handler will be invoked with 3 arguments: the jQuery event object, the 
+  suggestion object that was moved to, and the name of the dataset the 
+  suggestion belongs to.
 
 * `typeahead:asyncrequest` – Fired when an async request for suggestions is 
   sent. The event handler will be invoked with 3 arguments: the jQuery event 

src/typeahead/dataset.js

@@ -10,6 +10,7 @@ var Dataset = (function() {
   var keys, nameGenerator;
 
   keys = {
+    dataset: 'tt-selectable-dataset',
     val: 'tt-selectable-display',
     obj: 'tt-selectable-object'
   };
@@ -41,7 +42,7 @@ var Dataset = (function() {
     www.mixin(this);
 
     this.highlight = !!o.highlight;
-    this.name = o.name || nameGenerator();
+    this.name = _.toStr(o.name || nameGenerator());
 
     this.limit = o.limit || 5;
     this.displayFn = getDisplayFn(o.display || o.displayKey);
@@ -70,6 +71,7 @@ var Dataset = (function() {
 
     if ($el.data(keys.obj)) {
       return {
+        dataset: $el.data(keys.dataset) || '',
         val: $el.data(keys.val) || '',
         obj: $el.data(keys.obj) || null
       };
@@ -108,7 +110,7 @@ var Dataset = (function() {
         this._empty();
       }
 
-      this.trigger('rendered', this.name, suggestions, false);
+      this.trigger('rendered', suggestions, false, this.name);
     },
 
     _append: function append(query, suggestions) {
@@ -129,7 +131,7 @@ var Dataset = (function() {
         this._renderNotFound(query);
       }
 
-      this.trigger('rendered', this.name, suggestions, true);
+      this.trigger('rendered', suggestions, true, this.name);
     },
 
     _renderSuggestions: function renderSuggestions(query, suggestions) {
@@ -189,6 +191,7 @@ var Dataset = (function() {
         context = that._injectQuery(query, suggestion);
 
         $el = $(that.templates.suggestion(context))
+        .data(keys.dataset, that.name)
         .data(keys.obj, suggestion)
         .data(keys.val, that.displayFn(suggestion))
         .addClass(that.classes.suggestion + ' ' + that.classes.selectable);
@@ -242,7 +245,7 @@ var Dataset = (function() {
       this.cancel = function cancel() {
         canceled = true;
         that.cancel = $.noop;
-        that.async && that.trigger('asyncCanceled', query);
+        that.async && that.trigger('asyncCanceled', query, that.name);
       };
 
       this.source(query, sync, async);
@@ -258,7 +261,7 @@ var Dataset = (function() {
         that._overwrite(query, suggestions);
 
         if (rendered < that.limit && that.async) {
-          that.trigger('asyncRequested', query);
+          that.trigger('asyncRequested', query, that.name);
         }
       }
 
@@ -272,7 +275,7 @@ var Dataset = (function() {
           var idx = Math.abs(rendered - that.limit);
           rendered += idx;
           that._append(query, suggestions.slice(0, idx));
-          that.async && that.trigger('asyncReceived', query);
+          that.async && that.trigger('asyncReceived', query, that.name);
         }
       }
     },

src/typeahead/event_bus.js

@@ -41,12 +41,9 @@ var EventBus = (function() {
     // ### private
 
     _trigger: function(type, args) {
-      var $e;
+      var $e = $.Event(namespace + type);
 
-      $e = $.Event(namespace + type);
-      (args = args || []).unshift($e);
-
-      this.$el.trigger.apply(this.$el, args);
+      this.$el.trigger.call(this.$el, $e, args || []);
 
       return $e;
     },

src/typeahead/typeahead.js

@@ -131,7 +131,7 @@ var Typeahead = (function() {
       this._updateHint();
     },
 
-    _onDatasetRendered: function onDatasetRendered(type, dataset, suggestions, async) {
+    _onDatasetRendered: function onDatasetRendered(type, suggestions, async, dataset) {
       this._updateHint();
       this.eventBus.trigger('render', suggestions, async, dataset);
     },
@@ -347,10 +347,10 @@ var Typeahead = (function() {
     select: function select($selectable) {
       var data = this.menu.getSelectableData($selectable);
 
-      if (data && !this.eventBus.before('select', data.obj)) {
+      if (data && !this.eventBus.before('select', data.obj, data.dataset)) {
         this.input.setQuery(data.val, true);
 
-        this.eventBus.trigger('select', data.obj);
+        this.eventBus.trigger('select', data.obj, data.dataset);
         this.close();
 
         // return true if selection succeeded
@@ -367,9 +367,9 @@ var Typeahead = (function() {
       data = this.menu.getSelectableData($selectable);
       isValid = data && query !== data.val;
 
-      if (isValid && !this.eventBus.before('autocomplete', data.obj)) {
+      if (isValid && !this.eventBus.before('autocomplete', data.obj, data.dataset)) {
         this.input.setQuery(data.val);
-        this.eventBus.trigger('autocomplete', data.obj);
+        this.eventBus.trigger('autocomplete', data.obj, data.dataset);
 
         // return true if autocompletion succeeded
         return true;
@@ -379,18 +379,20 @@ var Typeahead = (function() {
     },
 
     moveCursor: function moveCursor(delta) {
-      var query, $candidate, data, payload, cancelMove;
+      var query, $candidate, data, suggestion, datasetName, cancelMove;
 
       query = this.input.getQuery();
+
       $candidate = this.menu.selectableRelativeToCursor(delta);
       data = this.menu.getSelectableData($candidate);
-      payload = data ? data.obj : null;
+      suggestion = data ? data.obj : null;
+      datasetName = data ? data.dataset : null;
 
       // update will return true when it's a new query and new suggestions
       // need to be fetched – in this case we don't want to move the cursor
       cancelMove = this._minLengthMet() && this.menu.update(query);
 
-      if (!cancelMove && !this.eventBus.before('cursorchange', payload)) {
+      if (!cancelMove && !this.eventBus.before('cursorchange', suggestion, datasetName)) {
         this.menu.setCursor($candidate);
 
         // cursor moved to different selectable
@@ -404,7 +406,7 @@ var Typeahead = (function() {
           this._updateHint();
         }
 
-        this.eventBus.trigger('cursorchange', payload);
+        this.eventBus.trigger('cursorchange', suggestion, datasetName);
 
         // return true if move succeeded
         return true;

test/typeahead/dataset_spec.js

@@ -1,5 +1,5 @@
 describe('Dataset', function() {
-  var www = WWW(), mockSuggestions, mockSuggestionsDisplayFn;
+  var www = WWW(), mockSuggestions, mockSuggestionsDisplayFn, mockAsyncSuggestions;
 
   mockSuggestions = [
     { value: 'one', raw: { value: 'one' } },
@@ -13,6 +13,14 @@ describe('Dataset', function() {
     { display: '6' }
   ];
 
+  mockAsyncSuggestions = [
+    { value: 'four', raw: { value: 'four' } },
+    { value: 'five', raw: { value: 'five' } },
+    { value: 'six', raw: { value: 'six' } },
+    { value: 'seven', raw: { value: 'seven' } },
+    { value: 'eight', raw: { value: 'eight' } },
+  ];
+
   beforeEach(function() {
     this.dataset = new Dataset({
       name: 'test',
@@ -112,7 +120,7 @@ describe('Dataset', function() {
 
       this.dataset.update('woah');
 
-      expect(spy).toHaveBeenCalled();
+      expect(spy).toHaveBeenCalledWith('asyncRequested', 'woah', 'test');
     });
 
     it('should not trigger asyncRequested when not expecting backfill', function() {
@@ -153,7 +161,7 @@ describe('Dataset', function() {
       waits(100);
 
       runs(function() {
-        expect(spy).toHaveBeenCalled();
+        expect(spy).toHaveBeenCalledWith('asyncCanceled', 'woah', 'test');
       });
     });
 
@@ -186,7 +194,7 @@ describe('Dataset', function() {
       waits(100);
 
       runs(function() {
-        expect(spy).toHaveBeenCalled();
+        expect(spy).toHaveBeenCalledWith('asyncReceived', 'woah', 'test');
       });
     });
 
@@ -379,7 +387,8 @@ describe('Dataset', function() {
       });
     });
 
-    it('should trigger rendered after suggestions are rendered', function() {
+
+   it('should trigger rendered after sync suggestions are rendered', function() {
       var spy;
 
       this.dataset.onSync('rendered', spy = jasmine.createSpy());
@@ -388,6 +397,27 @@ describe('Dataset', function() {
       this.dataset.update('woah');
 
       waitsFor(function() { return spy.callCount; });
+
+      runs(function() {
+        expect(spy).toHaveBeenCalledWith('rendered', mockSuggestions, false, 'test');
+      });
+    });
+
+    it('should trigger rendered after suggestions are rendered', function() {
+      var spy;
+
+      this.dataset.async = true;
+      this.source.andCallFake(fakeGetWithAsyncSuggestions);
+
+      this.dataset.onSync('rendered', spy = jasmine.createSpy());
+      this.dataset.update('woah');
+
+      waitsFor(function() { return spy.callCount === 2; });
+
+      runs(function() {
+        expect(spy).toHaveBeenCalledWith('rendered', mockSuggestions, false, 'test');
+        expect(spy).toHaveBeenCalledWith('rendered', mockAsyncSuggestions.slice(0, 2), true, 'test');
+      });
     });
   });
 

test/typeahead/event_bus_spec.js

@@ -16,8 +16,8 @@ describe('EventBus', function() {
 
     this.$el.on('typeahead:fiz', spy);
 
-    this.eventBus.trigger('fiz');
-    expect(spy).toHaveBeenCalled();
+    this.eventBus.trigger('fiz', 'foo', 'bar');
+    expect(spy).toHaveBeenCalledWith(jasmine.any(Object), 'foo', 'bar');
   });
 
   it('#before should return false if default was not prevented', function() {

test/typeahead/menu_spec.js

@@ -264,13 +264,14 @@ describe('Menu', function() {
       var $selectable, datum;
 
       $selectable = $('<div>').data({
+        'tt-selectable-dataset': 'foo',
         'tt-selectable-display': 'one',
         'tt-selectable-object': 'two'
       });
 
       data = this.view.getSelectableData($selectable);
 
-      expect(data).toEqual({ val: 'one', obj: 'two' });
+      expect(data).toEqual({ dataset: 'foo', val: 'one', obj: 'two' });
     });
 
     it('should return null if no element is given', function() {