3

Polymer を ES6 クラスと結合するさらに別の試み。

そして、インポートされたes6クラス（systemjsによる）を持つポリマーコンポーネントでwctテストがランダムに失敗することを除いて、ほとんど機能します。私が理解している限り、これは mocha がテストを実行した後にクラス定義を含むスクリプトがロードされるために発生します。ポリマー コンポーネントは、html と javascript (後者を es5 にコンパイルするため) の 2 つの部分で構成されます。

html:

<dom-module id="my-test">
   <template>hello</template>
   <script>
      System.import('elements/my-test.js');
   </script>
</dom-module>

JavaScript:

import {User} from 'elements/model/user.js';

Polymer({
 is: "my-test",

 method: function(){
   console.log("method, user="+this.val);
 },

 ready: function(){
   this.user= new User(); //this.user is randomly undefined
 }
});

これは、少なくとも localhost からロードされた場合、ブラウザーで非常に安定して動作するようです。しかし、テストを「修正」する唯一のことは、Polymer の ready 呼び出しを遅らせることです。

Polymer.whenReady = function (f) {
   console.log("polymer ready");
   setTimeout(f, 100);// "fix"
   //f();
}

これは、ある時点でこれがすべてブラウザでも失敗することを意味します (おそらく、ローカルホスト以外からサービスを提供している場合)。

どうにかしてシステム レジスタの約束を達成し、HTMLImports.whenDocumentReady に似たものを作成することを考えていますが、これがどのように機能するかについてはまだ明確に理解していません。

ですから、どんなアイデアや提案も大歓迎です！

サンプル アプリは github にあります。

git clone https://github.com/bushuyev/test_test.git
cd test_test
git checkout tags/random_fail
npm install
bower install
gulp wct

失敗するよりも頻繁に成功させるには、wct.conf.js で verbose を true に変更します。

更新の種類:システム js SFX ライブラリをインポートする方法

4

1 に答える 1

1

Polymer、SystemJS、TypeScript (ES6 に似ていますが、Polymer に適した構文が追加されています) を非常にうまく組み合わせて使用​​でき、SystemJS を使用して HTML インポートを処理することもできます。これにはタイミングの問題が伴います。最初に webcomponents.js からの読み込みを待機し、ready イベントを (他のコードがそれを見る機会を得る前に) キャッチする小さな shimを公開しました。次に、Polymer を読み込み、最後に他のすべてのコンポーネントを読み込みます。および TypeScript コード。その後、再びイベントをディスパッチして、Polymer 自体の初期化を終了します。

これは、テクノロジーを前述のソリューション、ダウンロード可能なコード、およびデモと組み合わせることに関する記事です。

于 2015-08-27T16:17:35.340 に答える