0

WebComponentWeb サービスから定期的に情報を取得する Dartがあります。Web サービスをコンポーネントに挿入し、いつ Web サービスを呼び出すかをコンポーネントに決定させたいと考えています (これにより、サービスが作成されるまで、HTTP 呼び出しなしでモック Web サービスを使用してすべての UI コードのプロトタイプを作成できます)。

私が抱えている問題はWebComponent、ページがレンダリングされるまで、送信している Web サービス オブジェクトが null のように見えることです。サービス参照がいつページに渡されるのか正確にはわかりませんが、コンストラクターで値が null であるため、ページが構築された後に発生するようですがWebComponent、ページ自体がレンダリングされるときに値がインスタンス化されていることがわかります. Web サービスを呼び出すことができるように、サービス オブジェクトがページで使用可能になったことを通知するにはどうすればよいですか?

フォローアップの質問: サービス参照をWebComponentlike I am below に渡すのは悪い習慣ですか? もしそうなら、コードを変更せずに後で実際の 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>
4

1 に答える 1

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>
于 2013-08-28T17:51:52.893 に答える