0

I have the following template file:

<h2 style="margin-top: 20px" class="ui header">{{t 'Unscheduled Sessions'}}</h2>
<div id="sessions-list">
  {{#each unscheduled as |session|}}
    {{#draggable-object content=session}}
      <div class="unscheduled" data-toggle="tooltip" data-animation="false" data-placement="top" draggable="true">
        <span class="text">
          {{session.title}} | 
        </span>
        {{#each session.speakers as |speaker|}}
          <span class="text speaker">
            {{speaker.name}}
          </span>
        {{/each}}
      </div>
    {{/draggable-object}}
  {{/each}}
</div>

I want to add a data attribute to the elements generated by the {{draggable object ...}} helper. This attribute should essentially have its value as session, and it's not the same as content. Any idea how to accomplish this?

Sam Chats
  • 2,271
  • 1
  • 12
  • 34
  • Is draggable-object a component you control? Does this help? https://guides.emberjs.com/release/components/customizing-a-components-element/#toc_customizing-attributes – handlebears Aug 13 '18 at 05:09
  • @handlebears It is a third party helper. I want to add `data-*` attributes to it but am unable to. – Sam Chats Aug 13 '18 at 05:12
  • Ok, maybe you can import and extend the addon component, as described here https://guides.emberjs.com/release/components/customizing-a-components-element/ – handlebears Aug 13 '18 at 05:51
  • @handlebears Trying that for almost 5 hours :( – Sam Chats Aug 13 '18 at 05:55
  • That sounds frustrating. What’s the issue you are hitting? I’ve never tried this myself but maybe someone else can chime in – handlebears Aug 13 '18 at 12:26
  • @handlebears I have a list of events which I want to drag to a calendar, but the calendar will only recognize them if they have an `event` data. https://fullcalendar.io/docs/eventReceive – Sam Chats Aug 13 '18 at 14:55

1 Answers1

0

To add a custom data-* attribiute to an existing addon's components, first you need to import the component, extend it to include the data-* attribute, and then use your extended component in your app.

Generate your own component, let's say data-draggable, and put something like this in the component JS. Here, we're importing the component from the addon ember-drag-drop, and then adding our own attributeBindings features to it, which is necessary for custom element properties.

import Component from 'ember-drag-drop/components/draggable-object';

export default Component.extend({
    attributeBindings: ['data-event']
});

Then you can use your extended component in your template, instead of the addon component directly:

{{#data-draggable content=this data-event="some data thing"}}
   some stuff
{{/data-draggable}}

You should see the data-event="some data thing" attribute on the resulting markup.

See the Guides for adding attribute bindings in templates, and this stack overflow post for extending components.

handlebears
  • 2,168
  • 8
  • 18