2

我有一个父组件，它充当其他组件的容器。我希望容器能够查询其组件内的元素。例如，我的外部组件是：

<polymer-element name="task-dart">
  <template>
      <div class="task-list">
        <template repeat="{{tasks}}">
          <task-row task="{{}}"></task-row>
        </template>
      </div>
  </template>
  <script type="application/dart" src="taskdart.dart"></script>
</polymer-element>

我的内部组件是：

<polymer-element name="task-row" attributes="task">
  <template>
      <div class="task">
         <!-- html components of the task -->
      </div>
  </template>
  <script type="application/dart" src="task_row.dart"></script>
</polymer-element>

但是 taskdart.dart 中的以下内容都不会产生任何结果：

void created() {
    super.created();

    print(queryAll(".task").toString()); // []
    Timer.run( () {
        print("queryAll: " + queryAll(".task").toString()); // []
    });
}

这是因为 css 在内部组件中的作用域，还是因为在初始化过程中此时没有什么可查询的？无论哪种方式，我将如何解决它？

4

1 回答 1

5

尝试使用shadowRoot. 它仍然不会完全按照您的要求进行（但是，获取 `.task' 元素的列表。

自动将聚合物元素的顶级内容<template>放入影子根中。这意味着task-dart无法查询子<task-row>s 中的 div（它们包含在<task-row>的影子根中），它只能查询它自己的影子根以获取任务行列表。

Timer.run( () {
  print("queryAll: " + this.shadowRoot.queryAll("task-row").toString()); // [task-row, task-row, task-row, task-row]
});

如果您需要一些背景阅读，Polymer 项目有一些指向 Shadow DOM 资源的链接。

于 2013-09-08T20:40:49.693 回答