首页 文章

HOW-TO初始化Dart WebComponent

提问于
浏览 次
0

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

我发送到 WebComponent 的问题在呈现页面之前似乎为空 . 我不确定何时将服务引用传递给页面，但似乎在构造页面之后发生，因为 WebComponent 构造函数中的值为null，但是我可以看到当页面本身是值时实例化该值渲染 . How can I be notified that the service object is now available to the page so I can call the web service?

跟进问题：将服务引用传递给 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 回答

  • 1

    我认为我的问题可以通过使用 inserted 生命周期方法而不是 created 来解决 .

    最初，当我阅读 WebComponent 生命周期方法描述时，它说：

    每当将组件添加到DOM时调用 .

    我'm still not sure if this is the right method to use, but I have the object I'我正在寻找 - 所以我'm going to continue to experiment. Here' s我更新了 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>
    回复于

相关问题