自定義元素 - 從構造函數中的查詢（）的空引用

我正在研究我的第一個Dart應用程序，完成了飛鏢遊戲教程。我正在嘗試創建一個名爲top-menu的語義元素，最終將在我的頁面頂部顯示導航菜單選項卡列表。我的Dart應用能夠識別我的自定義元素並調用相關的構造函數。自定義元素 - 從構造函數中的查詢（）的空引用

但是，當我試圖查詢我的自定義元素中的UL元素時，我得到空引用。我需要UL參考才能將我的LI元素動態加載到菜單中。

問題1：該元素應該在構造函數運行的位置在DOM中可見嗎？

問題2：如果它尚未可見，是否有一個Dart事件可以用來在自定義元素完全加載到DOM後觸發加載LI元素？

在此先感謝！作爲參考，這裏是我的自定義元素的來源：

頂部菜單，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>

頂部菜單，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(); 
    } 

}

來源

2013-04-12 shammer64

我不能對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>

那麼就沒有必要把您的任何菜單顯示的代碼在你的構造。

來源

2013-04-12 15:41:13

謝謝，馬特。我選擇了我的方法，只是因爲這是Dart Noob能想到的第一件事。我認爲你的解決方案正是我正在尋找的。從這裏開始，我將努力動態地填充menuItem。 – shammer64

自定義元素 - 從構造函數中的查詢（）的空引用

回答

相關問題