Question

您有没有办法自定义组件的ID（我知道可以为视图完成...但是自ember 1.13以来已弃用视图）：

E.g。以下内容适用于该视图：

export default Ember.View.extend({
    classNames: ['music-js', 'vjs-default-skin', 'center-x','center-block'],
    attributeBindings: ['id'],
    id: 'musicOne',

但是当我尝试对组件使用id绑定时，我在控制台日志中得到了异常：

export default Ember.Component.extend({
    classNames: ['music-js', 'vjs-default-skin', 'center-x','center-block'],
    attributeBindings: ['id'],
    id: 'musicOne',

未捕获的TypeError：提供的元素或ID无效。

Answer 1

2种方式：

在组件本身中：

export default Ember.Component.extend({
  elementId: 'the-id'
});

或在组件调用中指定它：

{{my-component id="the-id"}}

Answer 2

我认为无法做到这一点的原因是该组件由Ember框架本身自动分配了一个ID。如果您在运行应用程序时检查HTML，则可以看到：

<div id="ember428" class="ember-view">

但是您可以处理该自动生成的ID并将其传递给JQuery插件，而不是根据Mikko的答案创建自己的ID。

请参阅this了解如何操作。

我认为这是首选方式，因为组件应该被隔离＆＃39;来自外部依赖。通过必须传递模板中的ID（根据Mikko的建议） - 因为组件的任何消费者都必须知道要传递哪个ID才能使组件工作。

然而，Mikko现在已经编辑了他的答案，因此在组件中设置自己的ID，也满足了“隔离”的要求。要求（即使用elementID: 'the-id'）

Ember自定义组件的id属性

2 个答案: