Question

我正在使用Polymer创建一个HTML元素，我希望它能够使用我编写的ES6类。因此，我需要先导入该类，然后注册该元素，这就是我所做的：

(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
    });
  });
})();

效果很好。但现在我想编写一个测试HTML页面来显示我的组件，其中包含一些虚拟数据：

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

由于一个简单的原因，它不起作用：<script>标记中的代码在 Polymer注册元素之前执行。

因此，我想知道是否可以使用System.js加载ES6模块同步，甚至更好，如果有可能收听元素注册的JavaScript事件（类似PolymerElementsRegistered）？

我尝试了以下但没有成功：

window.addEventListener('HTMLImportsLoaded', ...)

window.addEventListener('WebComponentsReady', ...)

HTMLImports.whenReady(...)

Answer 1

在聚合物入门套件的app/scripts/app.js脚本中，他们使用auto-binding template和dom-change事件

// Grab a reference to our auto-binding template
var app = document.querySelector('#app');

// Listen for template bound event to know when bindings
// have resolved and content has been stamped to the page
app.addEventListener('dom-change', function() {
  console.log('Our app is ready to rock!');
});

同时选中此thread可提供polymer-ready事件的替代方案。

通过System.js

1 个答案: