System.js aracılığıyla ES6 kodunu içe aktardıktan sonra Polimer öğesini tanımlama

Polymer kullanarak bir HTML öğesi oluşturuyorum ve yazdığım bir ES6 sınıfı ile çalışabilmeyi istiyorum. Bu nedenle, önce sınıfı almam ve sonra öğeyi kaydetmem gerek: Bu, yaptığım şey:System.js aracılığıyla ES6 kodunu içe aktardıktan sonra Polimer öğesini tanımlama

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

Ve iyi çalışıyor.

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

basit bir nedenden dolayı çalışmıyorsa: Ama şimdi bazı sahte verileri benim bileşeni görüntülemek için bir test HTML sayfası yazmak istiyorum Polimer kaydeder önce <script> etiketteki kod yürütülür öğesi. Böylece

o (PolymerElementsRegistered gibi bir şey) eleman kayıt için JavaScript olayı dinlemek mümkün olmazsa, daha iyi bile System.js kullanılarak veya eşzamanlı ES6 modülünü yüklemek için bir yol olup olmadığını bilmek istiyorum?

Ben başarılı olamadı aşağıdaki denedim: polimer başlangıç setinin den app/scripts/app.js komut dosyasında

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

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

HTMLImports.whenReady(...)

kaynak

2016-04-11 Flawyte

, onlar auto-binding template kullanıp dom-change olay

// 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!'); 
});

Ayrıca, bu thread polymer-ready olaya alternatifler sunuyor kontrol edin.

kaynak

2016-08-10 10:12:00 HenriTel

System.js aracılığıyla ES6 kodunu içe aktardıktan sonra Polimer öğesini tanımlama

cevap

İlgili konular