Polymer.dart Как запросить узлы внутри теневого корня дочернего пользовательского элемента

У меня есть родительский компонент, который служит контейнером для других компонентов. Я хочу, чтобы контейнер мог запрашивать элементы внутри своего компонента. Например, мой внешний компонент:

<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 ограничен внутренним компонентом, или потому, что в этот момент во время инициализации нечего запрашивать? В любом случае, как мне это исправить?


dart polymer dart-webui
person Jeff    schedule 08.09.2013    source источник
comment
Вы пересекаете границу корня тени. Таким образом, вы нарушаете инкапсуляцию. Не говорю, что это невозможно, но вы можете подумать о том, как это сделать без необходимости понимать внутреннюю структуру пользовательского элемента.   -  person Seth Ladd    schedule 09.09.2013

Ответы (1)


arrow_upward
5
arrow_downward

Попробуйте использовать shadowRoot. Это по-прежнему не будет делать именно то, что вам нужно (однако получение списка элементов `.task'.

Автоматически содержимое <template> верхнего уровня полимерного элемента помещается в теневой корень. Это означает, что task-dart не может запрашивать div в дочерних <task-row> (они содержатся в теневом корне <task-row>), он может запрашивать только свой собственный теневой корень, чтобы получить список строк задач.

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

В проекте Polymer есть несколько ссылок на ресурсы Shadow DOM, если вам нужна дополнительная информация.

person Chris Buckett    schedule 08.09.2013
comment
Оттуда я могу получить внутренний div, который хочу, с помощью taskRows[index].shadowRoot.query('.task') - person Jeff; 09.09.2013