如何初始化 Dart WebComponent答案

【问题标题】：HOW-TO Initialize Dart WebComponent如何初始化 Dart WebComponent
【发布时间】：2013-08-31 19:48:14
【问题描述】：

我有一个 Dart WebComponent，它定期从 Web 服务获取信息。我想将 Web 服务注入到组件中，并让组件决定何时调用 Web 服务（这将允许我使用模拟 Web 服务对所有 UI 代码进行原型设计，在编写服务之前没有 HTTP 调用）。

我遇到的问题是，我发送到WebComponent 的 Web 服务对象在页面呈现之前似乎为空。我不确定何时将服务引用传递给页面，但它似乎发生在页面构建后，因为WebComponent 构造函数中的值为null，但我可以看到该值在页面时被实例化本身被渲染。 如何通知我服务对象现在可用于页面，以便我可以调用 Web 服务？

后续问题：将服务引用传递到WebComponent 就像我下面的做法是不好的做法？如果是这样，我应该做些什么来分离模拟实现，以便以后可以在不更改任何代码的情况下注入真正的 Web 服务。

这是我的基础 Dart 页面：

<!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>

【问题讨论】：

标签： dart dart-webui

【解决方案1】：

我认为我的问题可以通过使用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>

【讨论】：