如何初始化Dart WebComponent

我有一個Dart WebComponent，它定期從Web服務獲取信息。我想將Web服務注入到組件中，並讓組件決定何時調用Web服務（這將允許我使用模擬Web服務爲所有UI代碼創建原型，直到寫入服務爲止，沒有HTTP調用）。如何初始化Dart WebComponent

我遇到的問題是，我發送給WebComponent的Web服務對象在呈現頁面之前似乎爲空。我不確定何時將服務引用傳遞給頁面，但似乎在構建頁面之後發生，因爲在構造函數WebComponent中值爲空，但是我可以看到該頁面本身是實例化的渲染。 如何通知服務對象現在可用於頁面，以便我可以調用Web服務？

後續問題：是否將服務參考號傳遞到WebComponent中，就像我處於不良做法之下一樣？如果是這樣，我應該怎麼做，而不是分開模擬實現，以便我可以在不更改任何代碼的情況下注入真正的Web服務。

這裏是我的基地飛鏢頁：

<!DOCTYPE html> 

<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Dart Prototype</title> 
    <link rel="stylesheet" href="dart_prototype.css"> 

    <link rel="import" href="location_container.html"> 
    </head> 
    <body> 
    <h1>Dart Prototype</h1> 

    <div id="location_management_container"> 
     <location-container location-service="{{applicationContext.locationService}}" count="{{startingCount}}"></location-container> 
    </div> 

    <script type="application/dart"> 
     import 'package:web_ui/web_ui.dart'; 
     import 'package:dart_prototype/dart_prototype_library.dart'; 

     final ApplicationContext applicationContext = new ApplicationContext(
     new WebService() 
    ); 
     int startingCount = 5; 

     main() { 
     print('main initializing'); 
     print(applicationContext); 
     print(applicationContext.locationService); 
     }  
    </script> 
    <script src="packages/browser/dart.js"></script> 
    </body> 
</html>

下面是location-container

<!DOCTYPE html> 

<html> 
    <head> 
    <meta charset="utf-8"> 
    </head> 
    <body> 
    <element name="location-container"> 
     <template> 
     <div> 
      <ul id="todo-list"> 
      <li>hi there!</li> 
      <li>{{count}}</li> 
      <li>{{locationService}}</li> 
      </ul>   
     </div> 
     </template> 
     <script type="application/dart"> 
     import 'package:web_ui/web_ui.dart'; 
     import 'package:dart_prototype/dart_prototype_library.dart'; 

     class LocationContainer extends WebComponent { 

      @observable 
      WebService locationService; 

      @observable 
      int count; 

      LocationContainer() { 
      print('in loc container constructor'); 
      print(locationService); 
      print(count); 
      }  

      created() { 
      print('created!'); 
      print(locationService); 
      print(count); 
      }    
     }   
     </script> 
    </element> 
    </body> 
</html>

的代碼下面是ApplicationContext的代碼和WebService

part of prototype_library; 

class ApplicationContext { 

    final WebService locationService; 

    ApplicationContext(
     this.locationService); 

} 

class WebService { 

    final Factory _objectFactory; 

    WebService(this._objectFactory); 

    Future call(String url) { 
    throw new UnimplementedError(); 
    } 
}

這是我的打印結果字符串語句到控制檯

Invalid CSS property name: -webkit-touch-callout 
main initializing 
Instance of 'ApplicationContext' 
Instance of 'WebService' 
in loc container constructor 
null 
null 
created! 
null 
null

這裏就是我的渲染頁面的回報：

Dart Prototype 

- hi there! 
- 5 
- Instance of 'WebService'

該網頁的源...

<!DOCTYPE html> 
<!-- This file was auto-generated from web/dart_prototype.html. --> 
<html><head><style>template { display: none; }</style> 
    <meta charset="utf-8"> 
    <title>Dart Prototype</title> 
    <link rel="stylesheet" href="../dart_prototype.css"> 


    </head> 
    <body> 
    <h1>Dart Prototype</h1> 

    <div id="location_management_container"> 
     <span is="location-container"></span> 
    </div> 


    <script type="application/dart" src="dart_prototype.html_bootstrap.dart"></script><script src="../packages/browser/dart.js"></script> 


</body></html>

來源

2013-08-28 Vinnie

我想我的問題可以通過使用inserted生命週期來解決方法而不是created。

最初，當我讀WebComponent生命週期方法的說明中，說：

每當調用一個組件被添加到DOM。

我還不確定這是否正確的使用方法，但我有我正在尋找的對象 - 所以我會繼續嘗試。這裏是我的更新WebComponent

<!DOCTYPE html> 

<html> 
    <head> 
    <meta charset="utf-8"> 
    </head> 
    <body> 
    <element name="location-container"> 
     <template> 
     <div> 
      <ul id="todo-list"> 
      <li>hi there!</li> 
      <li>{{count}}</li> 
      <li>{{locationService}}</li> 
      </ul>   
     </div> 
     </template> 
     <script type="application/dart"> 
     import 'package:web_ui/web_ui.dart'; 
     import 'package:dart_prototype/dart_prototype_library.dart'; 

     class LocationContainer extends WebComponent { 

      @observable 
      WebService locationService; 

      @observable 
      int count; 

      LocationContainer() { 
      print('in loc container constructor'); 
      print(locationService); 
      print(count); 
      }  

      created() { 
      print('created!'); 
      print(locationService); 
      print(count); 
      } 

      inserted() { 
      print('inserted!'); 
      print(locationService); 
      print(count); 
      } 

     }   
     </script> 
    </element> 
    </body> 
</html>

來源

2013-08-28 17:51:52 Vinnie

如何初始化Dart WebComponent

回答

相關問題