dart - 在 Dart Polymer 中访问 Shadow Dom 中的 html 元素

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>

在此模板中，当我在 EnteredView 方法末尾打印 $['submitButton'] 时，我得到 null。

但是:当我更改 html 模板并且不将按钮放在 Nestend 模板标记中时:

<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 中使用禁用属性的特殊表达式即可启用/禁用该按钮。

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

这将导致删除和添加禁用属性。在 if 或重复模板中查找元素仍然无法像这样工作。

Answer 1

访问 <template repeate="..."> 内的元素或template if="...">使用 $['id'] 还无法工作方法。
最近 Dart 小组里对此进行了讨论。我认为也应该有一个功能请求，但尚未找到它们。

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

如果没有，那么据我所知唯一的选择是 MutationObserver就像这里dart-polymer-dart-examples / web / mutation_observers /因为在元素插入 DOM 之前您无法访问该元素。

编辑:

• the discussion
• the bug