在 Dart Polymer 的 ShadowDom 中访问 htmlElement

Question

我对 Dart 和 Polymer 很陌生，有一个问题我找不到答案。

我正在编写一个简单的单页应用程序，并希望访问聚合物元素的 shadowDom 中的 buttonElement。 （SDK 1.0 和 Polymer 0.9.3，Dart 稳定版）

就像我从文档和 api 中理解的那样，我应该使用：

@override
void enteredView() {
  super.enteredView();
  submitButton = $['submitButton'];
  submitButton.disabled = true;
}

现在这是我的 html ：

<polymer-element name="..." attributes="..." >
  <template>
    ...
    <template repeat="{{ ... in ... }}">
      ...
    </template>
    <template if="{{...}}">
      ...
      <button id="submitButton" on-click="{{...}}">...</button>
    </template>
  </template>
</polymer-element>

在这个模板中，当我在 enterView 方法的末尾打印出 $['submitButton'] 时，我得到了 null。

但是：当我更改我的 html 模板并且不将按钮放在嵌套模板标签中时：

<polymer-element name="..." attributes="..." >
  <template>
    ...
    <template repeat="{{ ... in ... }}">
      ...
    </template>
    <template if="{{...}}">
      ...
    </template>
    <button id="submitButton" on-click="{{...}}">...</button>
  </template>
</polymer-element>

我得到了我的按钮并且可以使用它。否则，enteredView (button.disabled) 中的最后一次调用会引发错误。

谁能帮我解决这个问题？我做错了什么？

提前致谢。

编辑：

可以使用 Dart 中的 disabled 属性的特殊表达式来启用/禁用按钮。

<button disabled?="{{buttonDisabled}}">

这将导致删除和添加禁用属性。 在 if 或 repeat 模板中查找元素仍然不能这样工作。

Answer 1

使用$['id'] 方法访问<template repeate="..."> 或template if="..."> 中的元素还不起作用。
最近在 Dart 组里有一个关于这个的讨论。我认为也应该有一个功能请求，但还没有找到它们。

我不确定 shadowRoot.querySelector('#id') 是否有效。

如果不是，那么 AFAIK 唯一的选择是 MutationObserver 就像这里的 dart-polymer-dart-examples / web / mutation_observers / 因为在元素插入 DOM 之前您无法访问它。

编辑：

• the discussion
• the bug