Question

我正在制作我的第一个Dart应用程序，完成了飞镖游戏教程。我正在尝试创建一个语义命名的顶级菜单元素，最终将在页面顶部显示导航菜单选项卡列表。我的Dart应用程序能够识别我的自定义元素并调用相关的构造函数。

但是，在尝试查询自定义元素中的UL元素时，我得到一个空引用。我需要UL参考，以便将我的LI元素动态加载到菜单中。

问题1：该元素应该在构造函数运行点的DOM中可见吗？

问题2：如果它还不可见，是否有一个Dart事件我可以用来在自定义元素完全加载到DOM后触发LI元素的加载？

提前致谢！作为参考，这是我的自定义元素的来源：

TopMenu中-element.html

<!DOCTYPE html>

<html>
  <body>
    <element name="top-menu" constructor="TopMenu" extends="div">
      <template>
        <div>
          Top Menu
          <ul id="top-menu-list"></ul>
        </div>
      </template>
      <script type="application/dart" src="topmenu-element.dart"></script>
    </element>
  </body>
</html>

TopMenu中-element.dart

import 'package:web_ui/web_ui.dart';
import 'dart:html';

class TopMenu extends WebComponent {

  List menuItems = ['Session', 'Authentication Services', 'Vehicle Services', 'Subscriber Services', 'Data Services'];

  void populateMenu() {
    UListElement menuList = query('#top-menu-list');
    LIElement newMenuItem = new LIElement();
    newMenuItem.text = menuItems[0];
    menuList.children.add(newMenuItem);
  }

  TopMenu() {
    // populateMenu();
  }

}

Answer 1

我不能用查询方法具体说明构造函数中的DOM可见性，因为我真的不确定。但是，您可以使用更好的方法，这些方法在elements lifecycle的各个阶段调用。

那就是说，我可以问为什么你需要使用这个特殊的方法来添加孩子。使用template repeat这样做可能要容易得多：

<!DOCTYPE html>

<html>
  <body>
    <element name="top-menu" constructor="TopMenu" extends="div">
      <template>
        <div>
          Top Menu
          <ul id="top-menu-list">
            <li template repeat="item in menuItems">{{item}}</li>
          </ul>
        </div>
      </template>
      <script type="application/dart" src="topmenu-element.dart"></script>
    </element>
  </body>
</html>

然后，您无需在构造函数中放置任何菜单显示代码。

自定义元素 - 构造函数中query（）的null引用

1 个答案: