JS Error: "Tribute was already bound to TEXTAREA"

[wacochili]

I'm having issues triggering @mentions with an app using Rails 5, Ruby 2.3.1 inside a Backbone model in a Marionette view.

In my view, I have a form in a modal with a textarea: <textarea name="message" rows="3" placeholder="Write your comment..." class="form-input"></textarea>.

On keyup with '@' in console I am getting the above error: "Tribute was already bound to TEXTAREA".

The code in my Marionette view is pretty simple, the following is my function (in CoffeeScript):

mentionedUsers: ->
      allBrandUsers = (app.BrandChannel.request 'current:brand:users')
      tribute = new Tribute(values: allBrandUsers.models)
      tribute.attach(@ui.message)

...where @ui.message is the name of the <textarea>

I'm attaching the function with an event (last line below):

events:
      'submit @ui.form': 'onBeforeSubmit'
      'keypress @ui.message': 'onMessageKeypress'
      'keyup @ui.message': 'mentionedUsers'

With debugger stepping through, allBrandUsers evaluates properly:
UsersCollection {length: 2, models: Array[2], _byId: Object, parent: BrandModel}

also tribute evaluates properly:
Tribute {menuSelected: 0, current: Object, inputEvent: false, isActive: false, menuContainer: null…}

attaching seems to evaluate properly (although I am curious about the array here):
[<textarea name="message" rows="3" placeholder="Write your comment..." class="form-input" data-tribute="true"></textarea>]

I do not get the dropdown to trigger at all, and additionally, there's the error in console I mentioned already.

[mrsweaters]

The issue is that on key up you are rebinding to the same element on the page. The library adds a data-tribute attribute to the element to let you know that you are potentially double binding events.

What I would do is bring the instantiation of the Tribute instance, and attachment to the element, outside the scope of the event listener. You are also doing a request for allBrandUsers data for every key up event. I don't recommend doing this as this will put an unnecessary load on your server and the page. You might not need the key up listener at all from what I can tell.

[wacochili]

Thanks for the feedback. Based on your suggestions, this is fixed and there is no error with tribute. This is user error. The allBrandUsers is cached once as a variable and then referenced, so no issues there.

My data collection was structured incorrectly and all is well. Closing.

[mrsweaters]

I'm glad you got it working! Let me know if you have any other issues.

[devhassanconcept]

can you tel how u used it for first textarea