Ember：将属性添加到助手生成的元素

Question

我有以下模板文件：

<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>

我想为{{draggable object ...}} 助手生成的元素添加一个data 属性。该属性的值本质上应该是session，它与content 不同。知道如何做到这一点吗？

Answer 1

要将自定义 data-* 属性添加到现有插件的组件，首先您需要导入组件，扩展它以包含 data-* 属性，然后在您的应用中使用您的扩展组件。

生成你自己的组件，比如说data-draggable，然后在组件JS中放入类似这样的东西。在这里，我们从插件ember-drag-drop 导入组件，然后向其中添加我们自己的attributeBindings 功能，这是自定义元素属性所必需的。

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

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

然后你可以在你的模板中使用你的扩展组件，而不是直接使用插件组件：

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

您应该会在生成的标记上看到 data-event="some data thing" 属性。

请参阅添加attribute bindings in templates 和此stack overflow post for extending components 的指南。