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>

我想向data助手生成的元素添加一个{{draggable object ...}}属性。此属性的值本质上应为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的指南。

灰烬：将属性添加到由助手生成的元素

1 个答案: