Loaded Polymer Element with Fetch has no custom methods after inserting to DOM

[Ádám Liszkai]

Here is my situation: I have an app shell and have controller classes to load templates which have custom polymer elements in it. So far I load the template and add to the DOM and everything is work fine for first sight.

After the template contents are added to the DOM I try to access to the custom-element methods but I could not access to it. If I try to debug the code and run the important steps in console then I can acces to the element methods.

My 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'});
            });
        }
    });
    </script>
    </dom-module>

My Program:

    // [...]

    // 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}

I tried search for this but I could not find any relevant answer yet, somebody solved this issue in some way before? Did I make something just bad?

Already tried:

 - setTimeout (300ms) after adding element to the DOM » same result

 - adding _ to the method name (like paper elements methods) » same result

 - waiting for WebComponentsReady event after inserting the element into the DOM » event not fired, the program stopped

[Karl Tiedt]

I would suggest using Polymer's importHref method... since it handles things similarly to the link rel="import" ... I suspect you're not actually getting things parsed how you think you are with this method.

-Karl Tiedt

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/aedc791c-3e32-425e-b9ff-4cd6e71aac81%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Ádám Liszkai]

The importHref is not only available in the custom tag? Because in the program main scope the Polymer.importHref is undefined. I think you are correct about the parsing, but the strange is that the console global scope has the methods and the subscope has not. If I create the element and append to the DOM Im also able to use it's methods but I dont want to create every template a new element. 

[Karl Tiedt]

Sorry I wasn't very clear there, you can use either Polymer.Base.importHref or from an Polymer component, this.importHref I believe.

-Karl Tiedt

Follow Polymer on Google+: plus.google.com/107187849809354688692

---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/ce3caa10-50bb-4066-aeb3-bd1983abda26%40googlegroups.com.

[Ádám Liszkai]

Now it's working! Thank you for your help!

The modified code:

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

        });

    });

};

[Karl Tiedt]

Awesome, glad that helped!

-Karl Tiedt

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/67ff7dff-4916-4934-a098-66cdbfbd8756%40googlegroups.com.

[Ádám Liszkai]

I have opened about this problem a stackoverflow question before I found this group (http://stackoverflow.com/questions/38376583/ajax-load-polymer-element-and-run-its-methods)

Have you a stackoverflow user what can I mention or if you have, can you post an answer to it? :) and sorry for posting the problem here, I try to learn and use Polymer but I usally run into a problem what looks weird for me.