3
私はPolymerを使用してHTML要素を作成していますが、これは私が作成したES6クラスで動作するようにしたいのです。したがって、まずクラスをインポートしてから要素を登録する必要があります。System.js経由でES6コードをインポートした後のPolymer要素の定義
(function() {
System.import('/js/FoobarModel.js').then(function(m) {
window.FoobarModel = m.default;
window.FoobarItem = Polymer({
is: 'foobar-item',
properties: {
model: Object // instanceof FoobarModel === true
},
// ... methods using model and FoobarModel
});
});
})();
これはうまくいきます。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="/bower_components/webcomponentsjs/webcomponents.js"></script>
<script src="/bower_components/system.js/dist/system.js"></script>
<script>
System.config({
map:{
traceur: '/bower_components/traceur/traceur.min.js'
}
});
</script>
<link rel="import" href="/html/foobar-item.html">
</head>
<body>
<script>
(function() {
var data = window.data = [
{
city: {
name: 'Foobar City'
},
date: new Date('2012-02-25')
}
];
var view;
for (var i = 0; i < data.length; i++) {
view = new FoobarItem();
view.model = data[i];
document.body.appendChild(view);
}
})();
</script>
</body>
</html>
1つの単純な理由のために働いていません：しかし、今、私はいくつかのダミーデータと私のコンポーネントを表示するには、テストHTMLページを書きたいポリマーが登録前<script>タグ内のコードが実行されます素子。
このように私はそれが要素登録（PolymerElementsRegisteredのようなもの）のためのJavaScriptのイベントに耳を傾けることが可能です場合、さらに良いSystem.jsを使用するか、同期をES6モジュールをロードする方法がありますかどうかを知りたいのですが？
私は成功せず、次のことを試してみた：app/scripts/app.jsスクリプトで
window.addEventListener('HTMLImportsLoaded', ...)window.addEventListener('WebComponentsReady', ...)HTMLImports.whenReady(...)