Определение элемента Polymer после импорта кода ES6 через System.js

Я создаю элемент HTML с помощью Polymer и хочу, чтобы он мог работать с классом 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 зарегистрирует элемент.

Поэтому я хотел бы знать, есть ли способ загрузить модуль ES6 синхронно с помощью System.js или даже лучше, если можно прослушать событие JavaScript для регистрации элемента (что-то вроде PolymerElementsRegistered) ?

Я безуспешно пробовал следующее:

  • window.addEventListener('HTMLImportsLoaded', ...)
  • window.addEventListener('WebComponentsReady', ...)
  • HTMLImports.whenReady(...)

javascript ecmascript-6 polymer systemjs
person flawyte    schedule 11.04.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

В сценарии app/scripts/app.js из стартового набора полимеров используется шаблон автопривязки и 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!');
});

Также проверьте, что эта поток содержит альтернативы событию polymer-ready.

person HenriTel    schedule 10.08.2016