Question

我想在父模板中获取组件自动生成的elementId，例如

<script type="text/x-handlebars" data-template-name="index">
  my-component elementId: {{myComponentElementId}}
  {{my-component}}
</script>

有没有一种简单的方法可以在不改变父控制器或my-component的情况下执行此操作？

Answer 1

在组件初始化期间生成

elementId。您可以确保在组件完全插入DOM后设置ID。因此，您可以使用didInsertElement这样的操作：

some-example elementId: {{myComponentElementId}}
{{some-example elementIdProxy=myComponentElementId}}

didInsertElement: function() {
  this.set("elementIdProxy", this.get("elementId"));
}

因此，您通过其他绑定（elementId在此情况下代理elementIdProxy。我强烈建议不要明确设置ID，因为它在应用程序中必须是唯一的。 Ember关心这一点，所以重新发明轮子并不是一个好主意。

Fully working example in JSBin is here

Answer 2

在您的bin中，您尝试传递id但未在控制器上指定值。在控制器的setupCotroller挂钩中设置id值，该值将用作id。

否则你需要通过动作传递id。 Here is the link.

Answer 3

我可以通过以下方式访问elementId

使用其viewName属性
从父模板view.[componentName].elementId

示例：

<script type="text/x-handlebars" data-template-name="index">
  my-component elementId: {{view.myComponent.elementId}}
  {{my-component viewName="myComponent"}}
</script>

JsBin

注意

随着Glimmer渲染引擎的引入（Ember版本＆gt; = 1.13 ），通过elementId访问viewName为not supported any more。

相反，组件的elementId应明确设置为特定值，例如

示例：

<script type="text/x-handlebars" data-template-name="index"> my-component elementId: index-my-component {{my-component id="index-my-component"}} </script>

在这种情况下，开发人员需要确保elementId在页面DOM中是唯一的。如果要多次呈现模板，elementId应该与父组件elementId和一些预定义的id（请参阅JsBin）
连接在一起

Answer 4

问题（即错误消息的来源）是您尝试通过属性绑定覆盖组件的elementId属性。我试图传递id时遇到了这个问题。一个简单的解决方法是使用_elementId或任何其他不是elementId的单词。查看JSBin

在父模板中获取组件elementId

4 个答案: