AJAX Polymer Element laden und ausführen es Methoden

Question

Hier ist meine Situation: Ich habe eine App Shell und Controller-Klassen müssen Vorlagen laden, die in ihr ist kundenspezifische Polymerelemente aufweisen. Bisher lade ich die Vorlage und füge sie dem DOM hinzu und alles funktioniert gut für den ersten Blick.

Nachdem die Vorlage Inhalt in den DOM hinzugefügt wird Ich versuche, die benutzerdefinierten-Elemente-Methoden für den Zugriff aber ich konnte nicht darauf zugreifen. Wenn ich versuche, den Code zu debuggen und die wichtigen Schritte in der Konsole auszuführen, kann ich auf die Elementmethoden zugreifen.

Mein Element:

<link rel="import" href="../../components/polymer/polymer.html" /> 
<dom-module is="app-login"> 
<template> 
    <style> 
     :host { display: block; } 
     :host.hide { display: none; } 
    </style> 
    <div> samle content </div> 
</template> 
<script> 
Polymer({ 
    is: 'app-login', 
    run: function() { 
     return new Promise(function(resolve, reject) { 
      resolve({'id':0,'name':'user'}); 
     }); 
    }, 
    close: function() { 
     this.classList.add('hide'); 
    } 
}); 
</script> 
</dom-module> 

Mein Programm:

// [...] 
// this works fine, I just add for better understanding 
getTemplate(templateName) { 
    return new Promise(function(resolve, reject) 
    { 
     fetch('templates/'+templateName+'.html').then(response => { 
      document.getElementById('templates').innerHTML += response.text(); 
      resolve(response); 
     }).catch(error => { reject(error); }); 
    }); 
}; 
// [...] 
// this method called by the main program and cant't access to the element methods 
doLogin() { 
    this.getTemplate('login').then(templateResponse => { 
     let Login = document.querySelector('app-login'); // <app-login>...</app-login> 
     Login.run(); // TypeError: Login.run is not a function 
    }); 
}; 
// [...] 

templates/login.html:

<link rel="import" href="elements/app-login/app-login.html" /> 
<app-login></app-login> 

Console-Debugging:

let Login = document.querySelector('app-login'); 
//Return: <app-login>...</app-login> 
Login.run(); 
//Return: Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined} 

Ich habe versucht, für diese Suche aber ich konnte keine relevante Antwort noch finden, jemand, bevor Sie dieses Problem in irgendeiner Weise gelöst?

bereits versucht:

• SetTimeout nach auf das DOM Addierglied »gleiches Ergebnis
• Zugabe _ zu dem Methodennamen (wie Papier Elementen Methoden)» gleiches Ergebnis
• für WebComponentsReady Ereignis wartet nach dem Einfügen des Elements in das DOM »-Ereignis nicht ausgelöst, stoppte das Programm

Answer 1

Nach dem Graben in das Thema und um Hilfe bei Polymer-Dev-Gruppe bei Google bitten; Karl Tiedt (@ktiedt) löste mein Problem:

Die Lösung war die Verwendung des Polymers importHref und dom(). AppendChild anstelle von einfachen responseText an das Containerelement anhängen. Die Methode war nicht verfügbar, da das Element-Parsing anders ist und soweit ich glaube, kann Javascript nicht auf das Element shadowDOM zugreifen, wenn Sie den HTML-Text an die innerHTML des Containers anhängen.

änderte ich die getTemplate Verfahren das Polymer importHref zu verwenden und den Behälter mit Polymer.dom() anhängen. AppendChild.

Informationen über die importHref Nutzung:
https://www.polymer-project.org/1.0/docs/devguide/instance-methods#imports-and-urls

getTemplate(templateName) 
{ 
    let templateFile = this.baseURL+'templates/'+templateName+'.html'; 

    return new Promise(function(resolve, reject) 
    { 
     let templateRequest = Polymer.Base.importHref(templateFile, 
     function() 
     { 
      Polymer.dom(document.getElementById('templates')) 
        .appendChild(templateRequest.import.body); 

      resolve(templateRequest); 
     }, 
     function(error) 
     { 
      reject(error); 
     }); 
    }); 
};