Question

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

我遇到的问题是，我发送到WebComponent的Web服务对象似乎为空，直到呈现页面为止。我不完全知道什么时候该服务引用传递到页面上，但似乎因为该值是在WebComponent构造空构造页面后发生的，但我可以看到该值被实例化时页面本身被渲染。 如何通知该服务对象现在可供页面使用，以便我可以调用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>

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

HOW-TO初始化Dart WebComponent

1 个答案: